Межбуквенное расстояние

​

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

​

Установка межбуквенного интервала

Управляйте межбуквенным интервалом в элементе с помощью утилит tracking-{size}.

<p class="tracking-tight ...">Быстрая коричневая лиса ...</p>
<p class="tracking-normal ...">Быстрая коричневая лиса ...</p>
<p class="tracking-wide ...">Быстрая коричневая лиса ...</p>

​

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

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

Использование отрицательных значений не имеет особого смысла со шкалой межбуквенного интервала, которую Tailwind включает из коробки, но если вы решили настроить шкалу межбуквенного интервала, чтобы использовать числа вместо описательных слов, таких как «широкий», отрицательный модификатор значения может быть полезен.

<p class="-tracking-2">Быстрая коричневая лиса ...</p>

module.exports = {
  theme: {
    letterSpacing: {
      '1': '0em',
      '2': '0.025em',
      '3': '0.05em',
      '4': '0.1em',
    }
  }
}

​

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

​

Наведение, фокус и другие состояния

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

<p class="tracking-tight hover:tracking-wide">
  <!-- ... -->
</p>

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

​

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

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

<p class="tracking-tight md:tracking-wide">
  <!-- ... -->
</p>

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

​

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

​

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

По умолчанию Tailwind предоставляет шесть утилит для отслеживания. Вы можете изменить, добавить или удалить их, отредактировав раздел theme.letterSpacing в Вашей конфигурации Tailwind.

module.exports = {
  theme: {
    letterSpacing: {
      tightest: '-.075em',
      tighter: '-.05em',
      tight: '-.025em',
      normal: '0',
      wide: '.025em',
      wider: '.05em',
      widest: '.1em',
      widest: '.25em',
    }
  }
}

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

​

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

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

<p class="tracking-[.25em]">
  <!-- ... -->
</p>

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