Style & Decoration

Utilities for controlling the style of text.

Work in progress!

More detailed documentation is coming soon, but in the meantime here's a quick class reference.

Class reference

Class Properties
.italic font-style: italic;
.roman font-style: normal;
.uppercase text-transform: uppercase;
.lowercase text-transform: lowercase;
.capitalize text-transform: capitalize;
.normal-case text-transform: none;
.underline text-decoration: underline;
.line-through text-decoration: line-through;
.no-underline text-decoration: none;
.antialiased -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
.subpixel-antialiased -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto;

Hover

In addition to the standard responsive variations, text style utilties also come in hover: variations that apply the given text style on hover.

<a href="#" 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>

Customizing

Responsive and State Variants

By default, only responsive and hover 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 focus variants:

{
// ...
modules: {
    // ...
-   textStyle: ['responsive', 'hover'],
+   textStyle: ['responsive', 'hover', 'focus'],
}
}

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:

{
// ...
modules: {
    // ...
-   textStyle: ['responsive', 'hover'],
+   textStyle: false,
}
}