Tailwind CSS Text Decoration

Text decoration refers to CSS properties that define how text is enhanced beyond its basic typographic rendering. It allows developers to add underline, overline, line-through, or no underline to the texts.

Tailwind CSS offers predefined classes to make working with text decoration properties seamless and efficient. By leveraging Tailwind's built-in text decoration utilities, you can easily enhance the presentation of text while maintaining the flexibility to conditionally style elements based on user interaction, responsive breakpoints, or specific states.

Overview of Text Decoration

Underline

The utility underline adds underlining to the text of the <p> tag. In traditional CSS, this equivalent style would be manually written as: text-decoration-line: underline;

export default function App() {
  return <h1>Hello world</h1>
}

Overline

The utility overline adds overlining to the text of the <p> tag. In traditional CSS, this equivalent style would be manually written as: text-decoration-line: overline;

export default function App() {
  return <h1>Hello world</h1>
}

Line Through

The utility line-through adds line-through to the text of the <p> tag. In traditional CSS, this equivalent style would be manually written as: text-decoration-line: line-through;

export default function App() {
  return <h1>Hello world</h1>
}

No Underline

The utility no-underline removes underlining from the text of the <p> tag. In traditional CSS, this equivalent style would be manually written as: text-decoration-line: none;

export default function App() {
  return <h1>Hello world</h1>
}

States and Responsiveness

Tailwind CSS can also add utilities dynamically based on user interaction, viewport size, or custom conditions.

Hover and Focus States

Pseudo-classes like hover, focus, or active are used for utility-driven styling.

export default function App() {
  return <h1>Hello world</h1>
}

• Initially, the anchor text appears underlined due to the underline utility.
• On hover, hover:no-underline removes the underline.

Breakpoint Modifiers

Tailwind’s breakpoint prefixes like sm:, md:, lg: enable you to conditionally style elements for specific screen sizes.

export default function App() {
  return <h1>Hello world</h1>
}

• On mobile phones (i.e., screens smaller than 640px), the no-underline utility is applied.
• On tablets, laptops, and large monitors (screens 640px and larger, represented by sm), the underline utility gets activated.

Since, Tailwind has a breakpoint system that is mobile-first, prefixes like sm use min-width instead of max-width. So, the utilities are applied on the breakpoint of the prefix and above.

Go to the browser developer tools and check the above code on a breakpoint above 640px, the underline will be added.

Real World Examples

Product Feature List with Underline Hover Effects

This component showcases a product feature list where each item has a underline animation on hover.

export default function App() {
  return <h1>Hello world</h1>
}

Article Preview Cards with Strikethrough Price

A component displaying article cards with strikethrough pricing for discounted items and hover on titles.

export default function App() {
  return <h1>Hello world</h1>
}

Navigation Menu with Double Underline Effect

A navigation menu component with a double underline effect on active items.

export default function App() {
  return <h1>Hello world</h1>
}

Task List with Completion Strikethrough

A task management component that applies strikethrough decoration to completed items.

export default function App() {
  return <h1>Hello world</h1>
}

Event Schedule with Wavy Underline Highlights

An event schedule component featuring wavy underlines for special highlights.

export default function App() {
  return <h1>Hello world</h1>
}

Best Practices

Maintain Design Consistency

When creating cohesive designs, maintaining consistency in how text decoration styles are applied is essential. Tailwind CSS simplifies this by providing predefined classes, but it’s up to the designer to use them consistently.

Below is an example where navigation links share consistent underline styles on hover.

export default function App() {
  return <h1>Hello world</h1>
}

• Use theme extensions to define custom decoration-color values for consistent branding.
• Avoid mixing unrelated underline styles such as dotted on one element and solid on another unless it’s intentional for emphasis.

Leverage Utility Combinations

Combine utilities to create more dynamic and visually appealing interfaces. Tailwind’s design philosophy encourages thoughtful utility combinations. Use font sizes, colors, and decorations together to establish focus and hierarchy in your content.

export default function App() {
  return <h1>Hello world</h1>
}

Accessibility Considerations

Enhance Readability and Navigability

Text decoration utilities like underline or line-through play a dual role in improving accessibility—enhancing visual emphasis and aiding navigational cues. For example, underlines are widely recognized as signifiers of anchor links, making it easier for users to distinguish interactive elements. Pairing Tailwind's decoration-* and color utilities ensures that decorations stay clear and functional.

Consider readability for audiences with dyslexia or cognitive impairments. Avoid densely packed underlined text that might overwhelm users; instead, use utilities like underline-offset-* or increase line height through leading-* classes to introduce breathing space. Furthermore, judiciously applying text-opacity or subtle decorations like decoration-dashed can convey emphasis without adding unnecessary cognitive burden.

Ensure Keyboard Accessibility

Tailwind's text decoration utilities blend naturally with keyboard-focused designs, offering custom states that enhance navigation for users relying on non-pointing devices. Applying focus:underline on navigable text emphasizes clarity without requiring pointer interactions. Pair this focus strategy with ring-* utilities for hover-independent validation.

Variations like focus-visible:decoration-4 or decoration-dashed allow granularity and help distinguish focusable from inactive areas. Nested links within menus, for instance, can adopt hover:underline focus:decoration-double decoration-indigo-700 to blend visual states across interaction types seamlessly.