Tailwind CSS - Text Decoration

Modern Text Decoration with Tailwind CSS

Text decoration is a fundamental aspect of web typography. Tailwind CSS provides a comprehensive suite of utility classes to control the appearance of text decorations, including their style, color, thickness, and offset. This modern approach allows for highly customized and responsive designs without writing a single line of custom CSS.

Core Text Decoration Utilities

These are the foundational classes for applying or removing text decoration lines.

Class	CSS Properties
underline	text-decoration-line: underline;
overline	text-decoration-line: overline;
line-through	text-decoration-line: line-through;
no-underline	text-decoration-line: none;

• underline: Adds a line beneath the text. Essential for indicating links.
• overline: Adds a line above the text.
• line-through: Strikes a line through the text, often used to denote discounted prices or completed tasks.
• no-underline: Removes any text decoration. Useful for resetting styles on elements like links.

Enhanced Decoration Styling (Tailwind CSS v3+)

Modern web design demands more control than just the basic decoration line. Tailwind offers utilities to style the decoration’s color, style, thickness, and offset independently from the text itself.

• Decoration Color: Use decoration-{color} to change the color of the line (e.g., decoration-sky-500).
• Decoration Style: Use decoration-{style} to change the line style (e.g., decoration-wavy, decoration-dashed). See the Text Decoration Style chapter for more details.
• Decoration Thickness: Use decoration-{width} to control the line’s thickness (e.g., decoration-4). You can also use arbitrary values like decoration-[3px].
• Underline Offset: Use text-underline-offset-{width} to control the distance between the text and the underline (e.g., text-underline-offset-8).

Practical Examples

Example 1: Basic and Conditional Decoration

This example demonstrates the basic text decoration classes and how to apply them conditionally on hover. This is a common pattern for interactive elements.

<!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>Text Decoration Example</title>
</head>
<body class="p-8 font-sans bg-slate-50">
  <div class="max-w-xl mx-auto space-y-6">
    <h1 class="text-3xl font-bold text-slate-800">Text Decoration</h1>

    <p class="underline text-lg">This text is underlined.</p>
    <p class="overline text-lg">This text has an overline.</p>
    <p class="line-through text-lg">This text is struck through.</p>

    <p class="text-lg">
      In modern design, links are often not underlined by default but gain an underline on hover for better UX.
      <a href="#" class="font-semibold text-blue-600 no-underline hover:underline">
        Hover over me!
      </a>
    </p>
  </div>
</body>
</html>

Example 2: Advanced Custom Underlines

Combine multiple decoration utilities to create unique, branded link styles that stand out.

<!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>Advanced Underlines</title>
</head>
<body class="p-8 font-sans bg-gray-100">
  <div class="max-w-2xl mx-auto bg-white p-8 rounded-lg shadow-md">
    <h2 class="text-2xl font-bold text-gray-900 mb-4">Creative Link Styling</h2>
    <p class="text-gray-700 text-lg leading-relaxed">
      With Tailwind, you can create expressive underlines. For example, you can have a
      <a href="#" class="underline decoration-pink-500 decoration-2 text-underline-offset-4 font-semibold">
        thick, pink, offset underline
      </a>
      to draw attention. Or, for a more subtle effect, a
      <a href="#" class="underline decoration-orange-400 decoration-dotted text-underline-offset-2 font-semibold">
        dotted underline
      </a> might be appropriate. On hover, we can change the style completely, like this
      <a href="#" class="font-semibold no-underline hover:underline decoration-sky-500 decoration-wavy decoration-2 text-underline-offset-4 transition-all">
        wavy blue underline
      </a>.
    </p>
  </div>
</body>
</html>

Best Practices and Development Setup

Accessibility Note: Underlines are a universally recognized indicator for links. If you remove them by default (no-underline), always provide an alternative hover/focus state (like a hover underline or background color change) to ensure your links are discoverable and accessible.

Development Workflow: While the examples use the Tailwind CDN for simplicity, a professional setup involves installing Tailwind CSS via a package manager like npm and integrating it into your build process. This enables features like purging unused styles for smaller production files and customizing your tailwind.config.js file.

# 1. Install Tailwind CSS
npm install -D tailwindcss
npx tailwindcss init

# 2. Configure your template paths in tailwind.config.js
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

# 3. Add Tailwind directives to your main CSS file
@tailwind base;
@tailwind components;
@tailwind utilities;

# 4. Run the build process
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch