tailwindcss-highlights weekly downloads statistics

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:

Usage

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

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

\ 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)].

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.

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

Adding a gradient to the highlight

\ Rotate the highlight

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