A [Tailwind CSS](https://tailwindcss.com/) Plugin for [text-decoration](https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration) utility.


License
MIT
Install
npm install @downwindcss/text-decoration@0.0.2-beta.2

Documentation

@downwindcss/text-decoration

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')],
};

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>

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 decoration-underline">
    happy than right
  </span>
  any day.
</p>

rendered

overline.

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

rendered

line-through.

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

rendered

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 
      decoration-overline 
      decoration-underline 
      decoration-line-through"
  >
    happy than right
  </span>
  any day.
</p>

rendered

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 
    decoration-underline decoration-overline decoration-line-through 
    decoration-wavy
    decoration-primary
    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 
    decoration-underline decoration-overline decoration-line-through 
    decoration-wavy
    decoration-light-blue-300
    decoration-2">
    Header
</h1>

text-decoration-style

You can use following text-decoration-styles.

CSS Applied Style
decoration-solid text-decoration: solid
decoration-double text-decoration: double
decoration-dotted text-decoration: dotted
decoration-dashed text-decoration: dashed
decoration-wavy text-decoration: 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 
    decoration-underline decoration-overline decoration-line-through 
    decoration-wavy
    decoration-primary
    decoration-2">
    Header
</h1>

Available values are,

CSS Applied Style
decoration-1 text-decoration-thickness: 1px;
decoration-2 text-decoration-thickness: 2px;
decoration-4 text-decoration-thickness: 4px;
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

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