tailwindcss-highlights-v4 weekly downloads statistics

tailwindcss-highlights - A plugin for tailwindcss

Note: This is a fork of jln13x/tailwindcss-highlights by Julian Hubatsch, updated to add Tailwind CSS v4 support. All credit for the original plugin design and implementation goes to the original author, this fork just patches it to keep working on v4.

See it in Action 👉 Preview or Playground

⚠️ The Preview and Playground links above are the original author's demos, which use the original tailwindcss-highlights package (Tailwind v3 only). Do not install from what those pages show, -for Tailwind v4, install tailwindcss-highlights-v4 as described below.

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

Installation

To install the package, run

npm install -D tailwindcss-highlights-v4

Tailwind CSS v4

In v4 plugins are loaded from your CSS entry file instead. Add this alongside your existing @import "tailwindcss";:

If you're still using a legacy tailwind.config.js for other settings, you can point v4 at it explicitly with @config instead, and it'll pick up plugins listed there too:

Tailwind CSS v3

This package is backward compatible, meaning if you'd like to use this package for tailwind v3, you can still do so.

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

This is an unofficial fork maintained independently of the original author, jln13x. If you're not specifically here for Tailwind v4 support, check out the original repo instead.