@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

``bash
npm install @downwindcss/text-decoration


for Yarn users


yarn add @downwindcss/text-decoration
`

Configuration

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

`js
// 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

$3

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.

`html


Header


`

$3

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.

`html



I'd far rather be

happy than right

any day.



`

!rendered

#### overline.

`html



I'd far rather be

happy than right

any day.



`

!rendered

#### line-through.

`html



I'd far rather be

happy than right

any day.



`

!rendered

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

#### underline + overline + line-through

`html



I'd far rather be
class="
text-decoration
text-decoration-overline
text-decoration-underline
text-decoration-line-through"
>
happy than right

any day.



`

!rendered

$3

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

`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.

`html



Header



`

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

`js
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.

`html



Header



`

$3

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 |

$3

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

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

`html



Header



`

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.

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

And use it as decoration-0.2rem.




$3

Use decoration-none.

$3

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