@downwindcss/text-decoration

NOTE: Deprecated for Tailwind CSS version 3.x.
because TW now provides these functionalities out of the box.

• Text Decoration Color - https://tailwindcss.com/docs/text-decoration-color
• Text Decoration Style - https://tailwindcss.com/docs/text-decoration-style
• Text Decoration Thickness - https://tailwindcss.com/docs/text-decoration-thickness
• Text Underline Offset - https://tailwindcss.com/docs/text-underline-offset

A Tailwind CSS Plugin for text-decoration utility.

This plugin is composable (Composing the Uncompsable with CSS Variables) thus can add multiple decoration-line utitlies (to add under/overline and line-through together. Refer to the "Usage" sectrion below)

Installation

npm install @downwindcss/text-decoration
# for Yarn users
yarn add @downwindcss/text-decoration

Configuration

Add the plugin in tailwind.config.js in Plugins section.

// tailwind.config.js
module.exports = {
  plugins: [require('@downwindcss/text-decoration')],
};

TL;DR

Example: https://play.tailwindcss.com/fm4Vucj6IG

Here are all the available utilities

| Utility Name | CSS Definition | |------------------------------|---------------------------------------------------| | text-decoration | N/A: Needed to apply text decoration | | text-decoration-underline | text-decoration-line: underline | | text-decoration-overline | text-decoration-line: overline | | text-decoration-line-through | text-decoration-line: line-through | | text-decoration-solid | text-decoration-style: solid | | text-decoration-double | text-decoration-style: double | | text-decoration-dotted | text-decoration-style: dotted | | text-decoration-dashed | text-decoration-style: dashed | | text-decoration-wavy | text-decoration-style: wavy | | text-decoration-1 | text-decoration-thickness: 1px; | | text-decoration-2 | text-decoration-thickness: 2px; | | text-decoration-4 | text-decoration-thickness: 4px; | | text-decoration-8 | text-decoration-thickness: 8px; | | text-decoration-$color | $color: All Tailwind CSS and your custom colors |

Utilities

Usage

To enable text-decoration utilities, you need to add .text-decoration class.

By itself it doesn't apply any style similar to how built-in Transform utility doesn't apply any transformations.

<h2 class="text-decoration">Header</h2>

text-decoration-line

Utilities for applying lines.
MDN: decoration-line

Use Tailwind CSS's no-underline to remove text decoration.

ATTRIBUTION: Screenshots on decoration-line by Mozilla Contributrors is licensed under CC-BY-SA 2.5

underline.

<p>
  I'd far rather be
  <span class="text-decoration text-decoration-underline">
    happy than right
  </span>
  any day.
</p>

overline.

<p>
  I'd far rather be
  <span class="text-decoration text-decoration-overline">
    happy than right
  </span>
  any day.
</p>

line-through.

<p>
  I'd far rather be
  <span class="text-decoration text-decoration-through">
    happy than right
  </span>
  any day.
</p>

NOTE: It's not decoration-line-line-through even though CSS applied is decoration-line: line-through;

underline + overline + line-through

<p>
  I'd far rather be
  <span
    class="
        text-decoration 
        text-decoration-overline 
        text-decoration-underline 
        text-decoration-line-through"
  >
    happy than right
  </span>
  any day.
</p>

text-decoration-color

All Tailwind CSS colors AND your extended colors are available.

You can extend decoration colors and by extending textDecorationPlugin.colors.

Extend colors in tailwind.config.js

const colors = require('tailwindcss/colors')

module.exports = {
  theme: {
    extend: {
      textDecorationPlugin: {
        colors: {
          primary: 'tomato',
          secondary: 'gold',
        },
      },    },
  },
  variants: {},
  plugins: [textDecorationPlugin],
}

And use them in your HTML markup.

<h1 class="
    text-decoration 
    text-decoration-underline 
    text-decoration-overline 
    text-decoration-line-through 
    text-decoration-wavy
    text-decoration-primary
    text-decoration-2">
    Header
</h1>

If you extend colors, extended colors will be available for the plugin.

const colors = require('tailwindcss/colors')

module.exports = {
  theme: {
    extend: {
      colors: {
        'light-blue': colors.lightBlue,
      },
      textDecorationPlugin: {
        colors: {
          primary: 'tomato',
        },
      },
    },
  },
  variants: {},
  plugins: [textDecorationPlugin],
}

And use them in your HTML markup.

<h1 class="
    text-decoration 
    text-decoration-underline 
    text-decoration-overline 
    text-decoration-line-through 
    text-decoration-wavy
    text-decoration-light-blue-300
    text-decoration-2">
    Header
</h1>

text-decoration-style

You can use following text-decoration-styles.

| CSS | Applied Style | |------------------------|-------------------------------| | text-decoration-solid | text-decoration-style: solid | | text-decoration-double | text-decoration-style: double | | text-decoration-dotted | text-decoration-style: dotted | | text-decoration-dashed | text-decoration-style: dashed | | text-decoration-wavy | text-decoration-style: wavy |

text-decoration-thickness

When you type decoration-{thickness: number}, text-decoration-thickness will be applied.

As an example, decoration-2 will apply 2px thickness

<h1 class="
    text-decoration 
    text-decoration-underline 
    text-decoration-overline 
    text-decoration-line-through 
    text-decoration-wavy
    text-decoration-primary
    text-decoration-2">
    Header
</h1>

Available values are,

| CSS | Applied Style | |-------------------|---------------------------------| | text-decoration-1 | text-decoration-thickness: 1px; | | text-decoration-2 | text-decoration-thickness: 2px; | | text-decoration-4 | text-decoration-thickness: 4px; | | text-decoration-8 | text-decoration-thickness: 8px; |

You can extend the thickness by updating configuration, textDecorationPlugin.thicknesses property.

module.exports = {
  theme: {
    extend: {
      textDecorationPlugin: {
        thicknesses: {
          '0.2rem': '0.2rem',
        },
      },
    },
  },
  variants: {},
  plugins: [textDecorationPlugin],
}

And use it as decoration-0.2rem.

Clearing Deocration

Use decoration-none.

Duplicate Utilities

Following text-decoration can be done with native Tailwind CSS utilities but also added in this plugin to enable composability.

1. underline: text-decoration: underline;
2. line-through: text-decoration: line-through;
3. no-underline: text-decoration: none;

Resource

• Source: downwindcss/text-decoration
• NPM: https://www.npmjs.com/package/@downwindcss/text-decoration

Context

Based on idea post in Tailwind CSS dicussion, https://github.com/tailwindlabs/tailwindcss/discussions/3749

This plugin provides missing Tailwind CSS text-decoration* properties as a plugin.

Build

This project uses PNPM