1. Типография
  2. text-transform

Типография

text-transform

Утилиты для управления капитализацией текста.

ClassStyles
uppercase
text-transform: uppercase;
lowercase
text-transform: lowercase;
capitalize
text-transform: capitalize;
normal-case
text-transform: none;

Примеры

Преобразование текста в верхний регистр

Используйте утилиту uppercase для преобразования текста элемента в верхний регистр:

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

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

Преобразование текста в нижний регистр

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

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

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

Капитализация текста

Используйте утилиту capitalize для капитализации текста элемента:

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

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

Сброс регистра текста

Используйте утилиту normal-case для сохранения оригинального регистра текста элемента — обычно используется для сброса капитализации на разных контрольных точках:

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

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

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

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

<p class="capitalize md:uppercase ...">  Lorem ipsum dolor sit amet...</p>

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

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