Tailwind CSS - Text Decoration Color

Tailwind CSS: Text Decoration Color

The decoration-{color} utilities let you control the color of text decorations like underlines, overlines, and line-throughs. This allows you to create more vibrant and accessible links and stylized text.

Usage and Syntax

Simply add a decoration-{color}-{shade} class alongside a text decoration utility (like underline) to set its color. Tailwind’s entire color palette is available.

Class	CSS Properties	Notes
decoration-blue-500	text-decoration-color: #3b82f6;	Sets decoration to a specific shade of blue.
decoration-current	text-decoration-color: currentColor;	Matches the decoration color to the text color.
decoration-transparent	text-decoration-color: transparent;	Makes the decoration invisible.
hover:decoration-red-600	…	Changes color on hover.

Modern Decoration Styling

Modern CSS offers even more control over text decorations, all accessible through Tailwind utilities:

• Decoration Style: Use classes like decoration-solid, decoration-dashed, decoration-dotted, decoration-double, or decoration-wavy.
• Decoration Thickness: Control the line thickness with decoration-0, decoration-1, decoration-2, etc., or arbitrary values like decoration-[3px].
• Underline Offset: Adjust the distance between the text and the underline with underline-offset-1, underline-offset-2, etc.

Practical Examples

Example 1: Styling Links

This example demonstrates how to create a modern, accessible link with a subtle default underline that becomes more prominent on hover.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Text Decoration Color Example</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-8 bg-slate-50 text-slate-800">

  <h2 class="text-2xl font-bold mb-6">Article Excerpt</h2>

  <p class="text-lg leading-relaxed">
    Tailwind CSS provides a comprehensive set of utilities for building modern web interfaces.
    To learn more, you should
    <a
      href="#"
      class="font-semibold text-blue-600 underline
             decoration-blue-600/30 underline-offset-4
             transition-all
             hover:decoration-blue-600/100 hover:underline-offset-2"
    >
      read the official documentation
    </a>.
    It covers everything from core concepts to advanced customization.
  </p>
</body>
</html>

Example 2: Using Opacity and Arbitrary Colors

You can modify the opacity of any decoration color using / notation. For colors not in your theme, use arbitrary value syntax.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Advanced Decoration</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-8">
  <p class="mb-4">
    <span class="line-through text-2xl decoration-red-500/50 decoration-2">50% Opacity Strike-through</span>
  </p>
  <p>
    <span class="underline text-2xl decoration-wavy decoration-[#ff5733] decoration-2">Wavy underline with an arbitrary color</span>
  </p>
</body>
</html>

Best Practices

• Accessibility: Ensure your decoration color has sufficient contrast against the background, especially for links.
• Hover States: Always provide a clear visual change for interactive elements on hover and focus. Changing decoration color or style is a great way to do this.
• Consistency: Use your tailwind.config.js to define a consistent color palette for your project’s text decorations, ensuring a cohesive design.