Tailwind Text Decoration Generator

What This Tool Creates

This generator produces utility classes that map to CSS text-decoration properties. Unlike traditional CSS, Tailwind separates decoration properties into individual, composable classes:

• underline, overline, line-through for decoration type
• decoration-{style} for line style (solid, dashed, wavy, etc.)
• decoration-{color} for line color independent of text color
• decoration-{width} for line thickness (1px, 2px, 4px, 8px)
• underline-offset-{size} for spacing control

This modular approach lets you mix and match properties without writing custom CSS.

Practical Applications

<a class="underline decoration-blue-500 hover:decoration-blue-700 underline-offset-2">

<span class="line-through decoration-red-500 text-gray-500">$99</span>

<input class="focus:underline focus:decoration-blue-500" />

<h2 class="underline decoration-gray-300 underline-offset-4">

How Tailwind Builds These Classes

Tailwind's text decoration utilities are generated from these CSS properties:

/* Generated CSS from Tailwind classes */
.underline { text-decoration-line: underline; }
.decoration-dashed { text-decoration-style: dashed; }
.decoration-blue-500 { text-decoration-color: #3b82f6; }
.decoration-2 { text-decoration-thickness: 2px; }
.underline-offset-2 { text-underline-offset: 2px; }

When you combine multiple classes, Tailwind applies them in order, with later classes potentially overriding earlier ones based on CSS specificity rules.

Responsive & State Variants

Tailwind's variant system allows decoration changes across breakpoints and states, similar to how you'd use the flexbox builder for layout variants:

• Responsive: md:underline applies underline only on medium screens and up
• Hover/Focus: hover:decoration-wavy changes style on interaction
• Dark mode: dark:decoration-gray-400 adapts to user preferences
• Motion: motion-safe:decoration-2 for reduced motion considerations

Note: The generator focuses on hover, focus, and dark variants. You can manually add responsive prefixes like md: or lg: to generated classes.

Accessibility Considerations

Customizing Beyond the Generator

Extend the generated output with your Tailwind configuration:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      textDecorationColor: {
        'brand': '#ff6b35',
        'accent': '#00a8e8'
      }
    }
  }
}

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      textDecorationThickness: {
        '3': '3px',
        '10': '10px',
        'custom': '0.5rem'
      }
    }
  }
}

Implementation Guide

Frequently Asked Questions

Tool Limitations & Assumptions

• Generates utility classes only - no custom CSS or component code
• Color palette limited to Tailwind's default colors
• Does not generate responsive prefixes automatically (add manually)
• Animation uses generic transition-all - customize for performance
• Assumes Tailwind v3.0+ for all features