How to Use Tailwind Text Decoration Style in Your Projects

Tailwind CSS is a utility-first CSS framework that enables developers to quickly build custom designs without leaving their HTML. One of the many styling features that Tailwind provides is text decoration, which can be used to add or remove decorations from inline text elements. In this comprehensive guide, we’ll explore how to use Tailwind’s text decoration utilities to enhance the visual appeal of your text content.

Understanding Text Decoration in CSS

Before diving into Tailwind’s text decoration classes, it’s important to understand what text decoration is in the context of CSS. Text decoration typically refers to the styling applied to text such as underlines, overlines, line-throughs, and blink effects. In CSS, these are controlled by the text-decoration property.

Getting Started with Tailwind CSS

To use Tailwind’s text decoration styles, you first need to include Tailwind in your project. You can do this by installing Tailwind via npm or by including it directly in your HTML through a CDN. For the latest installation methods, refer to the official Tailwind CSS documentation.

Using Tailwind Text Decoration Classes

Tailwind provides a set of utility classes for text decoration that you can apply directly to your HTML elements. Here’s how to use them:

Underline Text

To underline text with Tailwind, you can use the underline class:

<p class="underline">This text is underlined.</p>

Remove Text Decoration

If you want to remove any text decoration that is inherited or applied by default (like underlines on links), you can use the no-underline class:

<a href="#" class="no-underline">This link has no underline.</a>

Overline Text

To add an overline to your text, use the overline class:

<p class="overline">This text has an overline.</p>

Line-Through Text

For a strikethrough effect, apply the line-through class:

<p class="line-through">This text is struck through.</p>

Combine Text Decoration Styles

Tailwind also allows you to combine text decoration styles. However, you need to be aware that CSS does not support multiple text decorations by default. To achieve this, you would typically need to layer multiple elements or use pseudo-elements. Tailwind does not provide a built-in utility for this, so you would need to add custom CSS.

Customizing Text Decoration Color

Tailwind CSS v2.0 introduced the ability to customize the color of text decorations using the decoration-{color} utility classes. Here’s how you can apply a custom color to your text decoration:

<p class="underline decoration-blue-500">This text is underlined with a blue color.</p>

Make sure to replace blue-500 with any color from Tailwind’s color palette that suits your design.

Responsive Text Decoration

Tailwind’s responsive modifiers enable you to apply text decoration styles at different breakpoints. For example, if you want text to be underlined only on small screens, you can use the following class:

<p class="sm:underline">This text is underlined on small screens and above.</p>

Hover, Focus, and Other States

Tailwind also provides state variants for text decoration, such as hover and focus. To underline text when it’s hovered over, use the hover: prefix:

<p class="hover:underline">Hover over this text to underline it.</p>


Tailwind’s text decoration utilities offer a quick and easy way to style text within your HTML. By using the utility classes provided by Tailwind, you can add underlines, overlines, line-throughs, and customize the color of your text decorations without writing custom CSS. Remember to consider responsive design and state variants to enhance the user experience.

For more advanced text decoration techniques or to dive deeper into Tailwind’s capabilities, always refer to the Tailwind CSS documentation. With Tailwind, you have the tools to create beautifully styled text that can adapt to any design requirement.


What do you think?