Package Exports

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (tw4-highlights) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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