Краткая справка

Класс
Свойства
indent-0text-indent: 0px;
indent-pxtext-indent: 1px;
indent-0.5text-indent: 0.125rem; /* 2px */
indent-1text-indent: 0.25rem; /* 4px */
indent-1.5text-indent: 0.375rem; /* 6px */
indent-2text-indent: 0.5rem; /* 8px */
indent-2.5text-indent: 0.625rem; /* 10px */
indent-3text-indent: 0.75rem; /* 12px */
indent-3.5text-indent: 0.875rem; /* 14px */
indent-4text-indent: 1rem; /* 16px */
indent-5text-indent: 1.25rem; /* 20px */
indent-6text-indent: 1.5rem; /* 24px */
indent-7text-indent: 1.75rem; /* 28px */
indent-8text-indent: 2rem; /* 32px */
indent-9text-indent: 2.25rem; /* 36px */
indent-10text-indent: 2.5rem; /* 40px */
indent-11text-indent: 2.75rem; /* 44px */
indent-12text-indent: 3rem; /* 48px */
indent-14text-indent: 3.5rem; /* 56px */
indent-16text-indent: 4rem; /* 64px */
indent-20text-indent: 5rem; /* 80px */
indent-24text-indent: 6rem; /* 96px */
indent-28text-indent: 7rem; /* 112px */
indent-32text-indent: 8rem; /* 128px */
indent-36text-indent: 9rem; /* 144px */
indent-40text-indent: 10rem; /* 160px */
indent-44text-indent: 11rem; /* 176px */
indent-48text-indent: 12rem; /* 192px */
indent-52text-indent: 13rem; /* 208px */
indent-56text-indent: 14rem; /* 224px */
indent-60text-indent: 15rem; /* 240px */
indent-64text-indent: 16rem; /* 256px */
indent-72text-indent: 18rem; /* 288px */
indent-80text-indent: 20rem; /* 320px */
indent-96text-indent: 24rem; /* 384px */

Основы использования

Добавление отступа текста

Используйте утилиты indent-{width}, чтобы установить количество пустого пространства (отступа), которое отображается перед текстом в блоке.

Так я начал ходить в воду. Я не буду лгать вам, мальчики, я был в ужасе. Но я шел дальше, и когда я пробирался мимо прибоя, на меня снизошло странное спокойствие. Я не знаю, было ли это божественным вмешательством или родством всех живых существ, но скажу тебе, Джерри, что в тот момент я был морским биологом.

<p class="indent-8">
  Итак, я пошел в воду. Я не буду лгать вам, мальчики, я был в ужасе.
  Но я шел дальше, и когда я пробирался мимо прибоя, на меня снизошло странное спокойствие.
  Я не знаю, было ли это божественным вмешательством или родством всех живых существ, но скажу тебе,
  Джерри, в тот момент я <em>был</em> морским биологом.
</p>

Использование отрицательных значений

Чтобы использовать отрицательное значение отступа текста, поставьте перед именем класса дефис, чтобы преобразовать его в отрицательное значение.

<div class="-indent-8">
  Итак, я пошел в воду. Я не буду лгать...
</div>

Применяя условно

Tailwind позволяет условно применять служебные классы в разных состояниях с помощью модификаторов вариантов. Например, используйте hover:indent-8, чтобы применять утилиту indent-8 только при hover.

<div class="indent-4 hover:indent-8">
  <!-- ... -->
</div>

Полный список всех доступных модификаторов состояния смотрите в документации Наведение, фокус и другие состояния.

Контрольные точки и медиа-запросы

Вы также можете использовать модификаторы вариантов для таргетинга на медиа-запросы, такие как реагирующие контрольные точки, темный режим, предпочтения с уменьшенным движением и многое другое. Например, используйте md:indent-8, чтобы применить утилиту indent-8 только на экранах среднего размера и выше.

<div class="indent-4 md:indent-8">
  <!-- ... -->
</div>

Чтобы узнать больше, ознакомьтесь с документацией по адаптивному дизайну, темному режиму и другим модификаторам медиазапросов.


Использование пользовательских значений

Настройка вашей темы

Масштаб отступа текста по умолчанию основан на масштабе интервала по умолчанию. Вы можете настроить масштаб интервалов, отредактировав theme.spacing или theme.extend.spacing в вашем файле tailwind.config.js.

tailwind.config.js
module.exports = {
  theme: {
    extend: {
      spacing: {
        '128': '32rem',
      }
    }
  }
}

Кроме того, вы можете настроить только масштаб текста, отредактировав theme.textIndent или theme.extend.textIndent в вашем файле tailwind.config.js.

tailwind.config.js
module.exports = {
  theme: {
    extend: {
      textIndent: {
        '128': '32rem',
      }
    }
  }
}

Дополнительные сведения о настройке темы по умолчанию смотрите в документации настройка темы.

Произвольные значения

Если вам нужно использовать одноразовое text-indent value, которое не имеет смысла включать в вашу тему, используйте квадратные скобки, чтобы сгенерировать свойство на лету, используя любое произвольное значение.

<div class="indent-[50%]">
  <!-- ... -->
</div>

Узнайте больше о поддержке произвольных значений в документации по произвольным значениям.