tailwindcss-highlights - A plugin for tailwindcss

See it in Action 👉 Preview or Playground

This plugin adds utility classes to easily add highlights to your texts.

Installation

To install the package, run

npm install -D tailwindcss-highlights

Add the plugin to the tailwind.config.js file in:

``javascript
module.exports = {
plugins: [
require('tailwindcss-highlights')),
]
}
`

Usage

Use highlight to add the default highlight (variant 1) to your element.
`html



Lorem Ipsum



`
\
To change the color of the highlight use highlight-{color}. All the colors from your theme (default ones and customs) are available aswell as arbitrary values.

`html



Lorem Ipsum



`
\
You can choose from different kinds of variants with highlight-variant-{value}. Check out the available variants on the Preview or use your own variant e.g. highlight-variant-[url(./path/to/custom-variant.svg)].

`html



Lorem Ipsum



`
Credits for some of the variants: svgbox

\
Use the highlight-spread--Utility to make the highlight spread into some direction.

- highlight-spread-{size} - Spread in all directions
- highlight-spread-{y,x}-{size} - Spread on the x or y axis
- highlight-spread-{t,b,l,r}-{size} - Set the spread for each direction individually



| Size | Value |
| ------ | ------- |
| 0 | 0 |
| none | 0 |
| sm | -4px |
| md | -8px |
| lg | -12px |
| xl | -16px |

Arbitrary values are also supported.



`html



Lorem Ipsum



Lorem Ipsum



Lorem Ipsum



`

Other Examples

This plugin adds the highlight as ::after-pseudo element so its possible to add additional styling by using the after:-utility.
\


Change the position
`html

Lorem Ipsum

`
Adding a gradient to the highlight
`html

Lorem Ipsum

`
\
Rotate the highlight
`html

Lorem Ipsum

``

Note: The owner of this repository is not with associated with the company Tailwind Labs Inc. This is just a plugin for tailwindcss