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