Tailwind CSS - Text Decoration Thickness

Modern Guide to Tailwind CSS: Text Decoration Thickness

Tailwind’s decoration-{width} utilities allow you to control the thickness of text decorations like underlines, overlines, and line-throughs. This gives you fine-grained control over your typography’s design.

Core Decoration Thickness Utilities

These classes are combined with other decoration utilities like underline and decoration-sky-500 to produce the final effect.

Class	CSS Property	Description
decoration-auto	text-decoration-thickness: auto;	Browser’s default thickness.
decoration-from-font	text-decoration-thickness: from-font;	Thickness is based on the font file’s suggested value. Great for typographic consistency.
decoration-0	text-decoration-thickness: 0px;	A thickness of zero.
decoration-1	text-decoration-thickness: 1px;	A thin 1px line.
decoration-2	text-decoration-thickness: 2px;	A 2px line.
decoration-4	text-decoration-thickness: 4px;	A thick 4px line.
decoration-8	text-decoration-thickness: 8px;	An extra-thick 8px line.

Practical Application: Styling Links

Let’s create a stylish link that changes its decoration thickness and color on hover, a common pattern in modern web design.

Example: Interactive Link Styling

<div class="font-sans p-8 bg-slate-100 text-slate-800">
  <h3 class="text-2xl font-bold mb-4">Article Excerpt</h3>
  <div class="prose lg:prose-xl">
    <p>
      Tailwind CSS is a utility-first framework that provides low-level utility classes to build custom designs without writing any custom CSS. To learn more, you can
      <a href="#" class="underline decoration-sky-500 decoration-2 hover:decoration-4 transition-all">
        visit the official documentation
      </a>.
      It's a great way to get started and understand the core concepts. You can also explore how to
      <a href="#" class="line-through decoration-pink-500 decoration-1">
        deprecate old styles
      </a>
      and embrace new ones.
    </p>
  </div>
</div>

Explanation:

• underline: Applies the underline decoration.
• decoration-sky-500: Sets the color of the underline.
• decoration-2: Sets the initial thickness to 2px.
• hover:decoration-4: On hover, increases the thickness to 4px.
• transition-all: Smoothly animates the change in thickness.

Customizing Thickness Values

If the default thickness values aren’t enough, you can easily add your own in your tailwind.config.js file.

tailwind.config.js

module.exports = {
  theme: {
    extend: {
      textDecorationThickness: {
        '3': '3px',
        '6': '6px',
      }
    }
  }
}

After this change, you can now use classes like decoration-3 and decoration-6 in your HTML.

Accessibility and Best Practices

• Contrast is Key: Ensure the decoration color has sufficient contrast against the background, especially for underlines that convey meaning (like links).
• Combine Utilities: Decoration thickness is rarely used alone. Combine it with decoration-color, decoration-style (decoration-dotted, decoration-wavy), and text-underline-offset for complete control.
• Subtle is Better: For most UI designs, a subtle decoration-1 or decoration-2 is sufficient. Heavier weights like decoration-8 should be used sparingly for stylistic emphasis.