Tailwind CSS - Text Decoration Style

Tailwind CSS - Text Decoration Style

Beyond a simple solid line, Tailwind CSS allows you to control the style of text decorations using the decoration-{style} utilities. This lets you add more personality and visual flair to elements like links and headings.

Text Decoration Style Classes

These classes apply different visual styles to the text decoration line (e.g., the underline).

Class	CSS Properties
decoration-solid	text-decoration-style: solid;
decoration-double	text-decoration-style: double;
decoration-dotted	text-decoration-style: dotted;
decoration-dashed	text-decoration-style: dashed;
decoration-wavy	text-decoration-style: wavy;

Functionality and Usage

• decoration-solid: The default, a single solid line.
• decoration-double: A double solid line. Great for formal or distinct emphasis.
• decoration-dotted: A series of dots. Provides a lighter, more subtle decoration.
• decoration-dashed: A series of dashes. A stylistic alternative to solid lines.
• decoration-wavy: A wavy line. Perfect for indicating spelling/grammar errors or for a playful, creative effect.

Important: These classes only set the style of the decoration. You still need to apply a decoration line class like underline for them to be visible.

Practical Examples

Example 1: Styling Different Underlines

This example shows each decoration style applied to an underlined text element.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
  <title>Decoration Style Example</title>
</head>
<body class="bg-slate-50 p-8">
  <div class="max-w-md mx-auto space-y-6 text-center">
    <h1 class="text-3xl font-bold text-slate-800">Text Decoration Styles</h1>

    <p class="underline decoration-solid text-xl">Solid Underline</p>
    <p class="underline decoration-double text-xl">Double Underline</p>
    <p class="underline decoration-dotted text-xl">Dotted Underline</p>
    <p class="underline decoration-dashed text-xl">Dashed Underline</p>
    <p class="underline decoration-wavy text-xl decoration-red-500">Wavy Underline (in red)</p>
  </div>
</body>
</html>

Example 2: Conditional Styling on Hover

Decoration styles can be combined with state modifiers like hover: to create engaging and informative interactive effects.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
  <title>Hover Decoration Styles</title>
</head>
<body class="bg-gray-100 p-8">
  <div class="max-w-xl mx-auto bg-white p-8 rounded-lg shadow-md">
    <h2 class="text-2xl font-bold text-gray-900 mb-4">Interactive Links</h2>
    <p class="text-gray-700 text-lg leading-relaxed">
      Enhance user feedback by changing decoration styles on hover. This link starts with a
      <a href="#" class="underline decoration-dotted text-blue-600 font-semibold
                         hover:decoration-solid">
        dotted underline
      </a> and becomes solid on hover.
      This next link has a
      <a href="#" class="underline decoration-wavy decoration-2 decoration-purple-400 text-purple-700 font-semibold
                         hover:decoration-purple-600 hover:text-underline-offset-4 transition-all duration-200">
        fancy wavy style
      </a> that becomes more prominent on hover.
    </p>
  </div>
</body>
</html>

Best Practices

Combine for Impact: For the best effect, combine decoration style with color (decoration-red-500), thickness (decoration-2), and offset (text-underline-offset-4) to create truly custom underlines. This is covered in more detail in the Text Decoration chapter.

Maintain Readability: While creative styles are fun, ensure they don’t compromise readability. A decoration-wavy style might be too distracting for long passages of text but perfect for a short, emphasized link.