Краткая справка

Класс
Свойства
uppercasetext-transform: uppercase;
lowercasetext-transform: lowercase;
capitalizetext-transform: capitalize;
normal-casetext-transform: none;

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

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

uppercase и lowercase преобразуют текст в верхний и нижний регистр соответственно, тогда как утилита capitalize преобразует текст в регистр заголовка. Утилиту normal-case можно использовать для сохранения исходного регистра - обычно для сброса заглавных букв в разных контрольных точках.

normal-case

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

uppercase

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

lowercase

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

capitalize

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

<p class="normal-case ...">Быстрая коричневая лиса ...</p>
<p class="uppercase ...">Быстрая коричневая лиса ...</p>
<p class="lowercase ...">Быстрая коричневая лиса ...</p>
<p class="capitalize ...">Быстрая коричневая лиса ...</p>

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

Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use hover:uppercase to only apply the uppercase utility on hover.

<p class="capitalize hover:uppercase">
  <!-- ... -->
</p>

For a complete list of all available state modifiers, check out the Hover, Focus, & Other States documentation.

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

You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use md:uppercase to apply the uppercase utility at only medium screen sizes and above.

<p class="capitalize md:uppercase">
  <!-- ... -->
</p>

To learn more, check out the documentation on Responsive Design, Dark Mode and other media query modifiers.