Типография
Утилиты для управления трекингом, или межбуквенным интервалом, элемента.
| Class | Styles |
|---|---|
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 для установки межбуквенного интервала элемента:
Быстрая коричневая лиса перепрыгивает через ленивую собаку.
Быстрая коричневая лиса перепрыгивает через ленивую собаку.
Быстрая коричневая лиса перепрыгивает через ленивую собаку.
<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>Подробнее о настройке темы читайте в документации темы.