tw4-highlights - A plugin for tailwindcss [BETA]

Literally the same thing as tailwindcss-highlights, but I need it to work with version 4.

See it in Action 👉 Playground

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

Installation

To install the package, run

npm install -D tw4-highlights

Add the plugin to the css file with your tailwind stuff:

/** import @tailwindcss */ /** you presumably already have this part*/
@plugin tw4-highlights

Usage

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

<p class="highlight">
    Lorem Ipsum
</p>

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.

<p class="highlight highlight-indigo-600">
    Lorem Ipsum
</p>

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

<p class="highlight highlight-indigo-600 highlight-variant-7">
    Lorem Ipsum
</p>

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.

<p class="highlight highlight-indigo-600 highlight-variant-7 highlight-spread-md">
    Lorem Ipsum
</p>

<p class="highlight highlight-indigo-600 highlight-spread-x-sm highlight-spread-y-xl">
    Lorem Ipsum
</p>

<p class="highlight highlight-indigo-600 highlight-spread-l-xl highlight-spread-t-sm">
    Lorem Ipsum
</p>

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

<p class="highlight highlight-variant-5 after:translate-y-2 after:-translate-x-4">
    Lorem Ipsum
</p>

Adding a gradient to the highlight

<p class="highlight highlight-variant-12 after:bg-gradient-to-tr after:from-amber-500 after:to-sky-500">
    Lorem Ipsum
</p>

Rotate the highlight

<p class="highlight highlight-variant-12 after:rotate-12">
    Lorem Ipsum
</p>

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