1. Типография
  2. letter-spacing

Типография

letter-spacing

Утилиты для управления трекингом, или межбуквенным интервалом, элемента.

ClassStyles
tracking-tighter
letter-spacing: var(--tracking-tighter); /* -0.05em */
tracking-tight
letter-spacing: var(--tracking-tight); /* -0.025em */
tracking-normal
letter-spacing: var(--tracking-normal); /* 0em */
tracking-wide
letter-spacing: var(--tracking-wide); /* 0.025em */
tracking-wider
letter-spacing: var(--tracking-wider); /* 0.05em */
tracking-widest
letter-spacing: var(--tracking-widest); /* 0.1em */
tracking-(<custom-property>)
letter-spacing: var(<custom-property>);
tracking-[<value>]
letter-spacing: <value>;

Примеры

Базовый пример

Используйте утилиты типа tracking-tight и tracking-wide для установки межбуквенного интервала элемента:

tracking-tight

Быстрая коричневая лиса перепрыгивает через ленивую собаку.

tracking-normal

Быстрая коричневая лиса перепрыгивает через ленивую собаку.

tracking-wide

Быстрая коричневая лиса перепрыгивает через ленивую собаку.

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

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

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

@theme {  --tracking-1: 0em;  --tracking-2: 0.025em;  --tracking-3: 0.05em;  --tracking-4: 0.1em;}

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

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

Использование пользовательского значения

Используйте синтаксис tracking-[<value>] , чтобы задать letter spacing на основе полностью пользовательского значения:

<p class="tracking-[.25em] ...">  Lorem ipsum dolor sit amet...</p>

Для переменных CSS вы также можете использовать синтаксис: tracking-(<custom-property>)

<p class="tracking-(--my-tracking) ...">  Lorem ipsum dolor sit amet...</p>

Это просто сокращение, tracking-[var(<custom-property>)] которое автоматически добавляет функцию var().

Адаптивный дизайн

Префикс a letter-spacing утилита с вариантом контрольной точки, например md:, чтобы применить утилиту только при размерах экрана medium и выше:

<p class="tracking-tight md:tracking-wide ...">  Lorem ipsum dolor sit amet...</p>

Подробнее об использовании вариантов читайте в документации по вариантам.

Кастомизация вашей темы

Используйте переменные темы --tracking-* для настройки утилит letter spacing в вашем проекте:

@theme {  --tracking-tightest: -0.075em; }

Теперь утилиту tracking-tightest можно использовать в вашей разметке:

<p class="tracking-tightest">  Lorem ipsum dolor sit amet...</p>

Подробнее о настройке темы читайте в документации темы.

Авторские права © 2025 Tailwind Labs Inc.·Политика в отношении товарных знаков