Question

Utilities for controlling the transformation of text.

Quick reference

Class	Properties
uppercase	text-transform: uppercase;
lowercase	text-transform: lowercase;
capitalize	text-transform: capitalize;
normal-case	text-transform: none;

Basic usage

Transforming text

The uppercase and lowercase will uppercase and lowercase text respectively, whereas capitalize utility will convert text to title-case. The normal-case utility can be used to preserve the original casing — typically to reset capitalization at different breakpoints.

normal-case

The quick brown fox jumps over the lazy dog.

uppercase

The quick brown fox jumps over the lazy dog.

lowercase

The quick brown fox jumps over the lazy dog.

capitalize

The quick brown fox jumps over the lazy dog.

<p class="normal-case ...">The quick brown fox ...</p>
<p class="uppercase ...">The quick brown fox ...</p>
<p class="lowercase ...">The quick brown fox ...</p>
<p class="capitalize ...">The quick brown fox ...</p>

---

Applying conditionally

Hover, focus, and other states

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.

Breakpoints and media queries

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.