Class reference

Italics

Use the .italic utility to make text italic.

Use the .roman utility to display text normally. This is typically used to reset italic text at different breakpoints.

Capitalization

Use the .uppercase utility to uppercase text.

Use the .lowercase utility to lowercase text.

Use the .capitalize utility to capitalize text.

Use the .normal-case utility to preserve the original casing. This is typically used to reset capitalization at different breakpoints.

Underlines

Use the .underline utility to underline text.

Use the .line-through utility to strike out text.

Use the .no-underline utility to remove underline or line-through styling.

Antialiasing

Use the .antialiased utility to render text using grayscale antialiasing.

Use the .subpixel-antialiased utility to render text using subpixel antialiasing.

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.

all

sm

md

lg

xl

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.

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.

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: