A tailwindcss plugin to add highlights to your text
npm install tailwindcss-highlightsSee it in Action 👉 Preview or Playground
This plugin adds utility classes to easily add highlights to your texts.
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')),
]
}
Use highlight to add the default highlight (variant 1) to your element. `html`
Lorem Ipsumhighlight-{color}
\
To change the color of the highlight use . All the colors from your theme (default ones and customs) are available aswell as arbitrary values.
`html`
Lorem Ipsumhighlight-variant-{value}
\
You can choose from different kinds of variants with . 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 directionshighlight-spread-{y,x}-{size}
- - Spread on the x or y axishighlight-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