Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/downwindcss/text-decoration
The missing Tailwind CSS text-decoration plugin
https://github.com/downwindcss/text-decoration
Last synced: 4 days ago
JSON representation
The missing Tailwind CSS text-decoration plugin
- Host: GitHub
- URL: https://github.com/downwindcss/text-decoration
- Owner: downwindcss
- License: mit
- Created: 2021-03-17T23:37:33.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2021-12-10T15:04:10.000Z (almost 3 years ago)
- Last Synced: 2024-09-19T18:18:03.937Z (about 2 months ago)
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/@downwindcss/text-decoration
- Size: 586 KB
- Stars: 8
- Watchers: 2
- Forks: 1
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# @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](https://tailwindcss.com/) Plugin for [text-decoration](https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration) utility.
This plugin is composable ([Composing the Uncompsable with CSS Variables](https://adamwathan.me/composing-the-uncomposable-with-css-variables/)) thus can add multiple [decoration-line](https://developer.mozilla.org/en-US/docs/Web/CSS/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](https://tailwindcss.com/docs/configuration#plugins).
```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
### 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](https://tailwindcss.com/docs/transform) utility doesn't apply any transformations.
```html
Header
```
### text-decoration-line
Utilities for applying lines.
MDN: [decoration-line](https://developer.mozilla.org/en-US/docs/Web/CSS/decoration-line)
Use Tailwind CSS's [no-underline](https://tailwindcss.com/docs/text-decoration#no-underline) to remove text decoration.
**ATTRIBUTION:** Screenshots on [decoration-line](https://developer.mozilla.org/en-US/docs/Web/CSS/decoration-line) by [Mozilla Contributrors](https://developer.mozilla.org/en-US/docs/MDN/About/contributors.txt) is licensed under [CC-BY-SA 2.5](https://creativecommons.org/licenses/by-sa/2.5/)
#### underline.
```html
I'd far rather be
happy than right
any day.
```
#### overline.
```html
I'd far rather be
happy than right
any day.
```
#### line-through.
```html
I'd far rather be
happy than right
any day.
```
**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
happy than right
any day.
```
### 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
```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
```
### text-decoration-style
You can use following [text-decoration-style](https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-style)s.
| 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](https://developer.mozilla.org/en-US/docs/Web/CSS/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`.
### Clearing Deocration
Use `decoration-none`.
### Duplicate Utilities
Following `text-decoration` can be done with native [Tailwind CSS utilities](https://tailwindcss.com/docs/text-decoration) 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](https://github.com/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](https://pnpm.io/)