Style & Decoration
Class reference
Italics
Use the .italic
utility to make text italic.
The quick brown fox jumped over the lazy dog.
<p class="italic ...">The quick brown fox ...</p>
Use the .roman
utility to display text normally. This is typically used to reset italic text at different breakpoints.
The quick brown fox jumped over the lazy dog.
<p class="roman ...">The quick brown fox ...</p>
Capitalization
Use the .uppercase
utility to uppercase text.
The quick brown fox jumped over the lazy dog.
<p class="uppercase ...">The quick brown fox ...</p>
Use the .lowercase
utility to lowercase text.
The quick brown fox jumped over the lazy dog.
<p class="lowercase ...">The quick brown fox ...</p>
Use the .capitalize
utility to capitalize text.
The quick brown fox jumped over the lazy dog.
<p class="capitalize ...">The quick brown fox ...</p>
Use the .normal-case
utility to preserve the original casing. This is typically used to reset capitalization at different breakpoints.
The quick brown fox jumped over the lazy dog.
<p class="normal-case ...">The quick brown fox ...</p>
Underlines
Use the .underline
utility to underline text.
The quick brown fox jumped over the lazy dog.
<p class="underline ...">The quick brown fox ...</p>
Use the .line-through
utility to strike out text.
The quick brown fox jumped over the lazy dog.
<p class="line-through ...">The quick brown fox ...</p>
Use the .no-underline
utility to remove underline or line-through styling.
<a href="#" class="no-underline ...">Link with no underline</a>
Antialiasing
Use the .antialiased
utility to render text using grayscale antialiasing.
The quick brown fox jumped over the lazy dog.
<p class="antialiased ...">The quick brown fox ...</p>
Use the .subpixel-antialiased
utility to render text using subpixel antialiasing.
The quick brown fox jumped over the lazy dog.
<p class="subpixel-antialiased ...">The quick brown fox ...</p>
Responsive
To control the style and decoration of an element at a specific breakpoint, add a {screen}:
prefix to any existing style and decoration utility. For example, use md:underline
to apply the underline
utility at only medium screen sizes and above.
For more information about Tailwind's responsive design features, check out the Responsive Design documentation.
The quick brown fox jumped over the lazy dog.
The quick brown fox jumped over the lazy dog.
The quick brown fox jumped over the lazy dog.
The quick brown fox jumped over the lazy dog.
The quick brown fox jumped over the lazy dog.
Hover
To control the style and decoration of an element on hover, add the hover:
prefix to any existing style and decoration utility. For example, use hover:underline
to apply the underline
utility on hover.
<a href="#hover" class="no-underline hover:underline text-blue text-lg">Link</a>
Hover utilities can also be combined with responsive utilities by adding the responsive {screen}:
prefix before the hover:
prefix.
<a href="#" class="... md:no-underline md:hover:underline ...">Link</a>
Focus
To control the style and decoration of an element on focus, add the focus:
prefix to any existing style and decoration utility. For example, use focus:uppercase
to apply the uppercase
utility on focus.
<input class="focus:uppercase ..." value="Focus me">
Focus utilities can also be combined with responsive utilities by adding the responsive {screen}:
prefix before the focus:
prefix.
<input class="md:focus:uppercase ..." value="Focus me">
Customizing
Responsive and State Variants
By default, only responsive, hover and focus variants are generated for text style utilities.
You can control which variants are generated for the text style utilities by modifying the textStyle
property in the modules
section of your Tailwind config file.
For example, this config will also generate variants:
Disabling
If you don't plan to use the text style utilities in your project, you can disable them entirely by setting the textStyle
property to false
in the modules
section of your config file: