tailugin weekly downloads statistics

tailugin

A collection of Tailwind CSS v4 utilities: enter/exit animations, semantic state variants, OKLCH color palettes, and easing tokens — all authored with native v4 directives (@utility, @custom-variant, @theme), so they compose exactly like built-in classes.

Requires Tailwind CSS v4. tailugin uses the v4 CSS-first architecture. It does not work with v3.

Installation

Usage

Import Tailwind, then tailugin, in your entry CSS:

That's the whole setup. Everything below is now available as utility classes and variants.

Prefer to pull in only what you need? Every module has its own entry point — see Granular imports.

Modules

tailugin is organized into four independent modules:

| Module | What it adds | Import |

| theme | 13 color palettes + 22 easing tokens | tailugin/theme | | variants | 40 semantic state variants | tailugin/variants | | utilities | Animation, sizing and alignment | tailugin/utilities | | preflight | Typographic refinements | tailugin/preflight |

Colors

13 OKLCH palettes, each with a 12-step ramp (50–975). They add to Tailwind's default colors — nothing native is overwritten, so bg-blue-500 and bg-cactus-500 coexist.

Available palettes: cactus, clay, dusk, fig, heather, kraft, lagoon, manila, moss, orchid, silt, sumac, woad.

Every palette is built the same way — one lightness ramp, one chroma curve, and a single hue — so swapping one for another keeps contrast consistent across your UI.

sumac (red) and woad (indigo) fill the two widest gaps on the hue wheel. They are named after the dye plants rather than the colors so they never shadow Tailwind's own red and indigo, which stay available alongside them.

Picking a step

Because the lightness ramp is shared, every palette crosses the WCAG thresholds at the same step. Pick the step by its job, not by the color:

| On a light surface | Passes | Contrast | Use for |

| 50–200 | — | 1.1–1.5 | Page and card backgrounds, subtle fills | | 300–400 | — | 1.9–2.8 | Dividers, disabled text, decorative only | | 500 | ≥ 3:1 | 3.5–3.9 | Borders, icons, focus rings, large headings | | 600 | ≥ 4.5:1 | 5.0–5.5 | Body text — the lowest step that passes AA | | 700–975 | ≥ 7:1 | 7.0–19.5 | Body text and headings, AAA |

| On silt-950 (dark) | Passes | Contrast | Use for |

| 50–400 | ≥ 4.5:1 | 6.3–15.9 | Body text and headings | | 500 | ~4.5:1 | 4.48–4.97 | Large text and headings (see note) | | 600 | ≥ 3:1 | 3.2–3.5 | Borders, icons, focus rings | | 700–900 | — | 1.4–2.5 | Raised surfaces, dividers, decorative only | | 975 | — | 1.3 | The surface below the page background |

On a dark surface, step 500 sits right on the AA line. It clears 4.5:1 for eleven palettes but lands at 4.48 and 4.49 for sumac and clay, the two most saturated ones. Use 400 when the text is small.

Every swatch fits inside sRGB, so nothing shifts on displays without a P3 gamut.

The dark end

950 is a charcoal rather than a near-black, which is deliberate — the ramp is drawn for light interfaces first. 975 is the extra anchor below it, six lightness points down, the same gap that separates 800 from 900. That is enough separation to read as elevation without a shadow:

| Layer | Step |

| Page background | 975 | | Raised surface | 950 | | Border | 900 / 800 |

Animations

Enter/exit animations built on two base utilities — animate-in and animate-out — combined with modifier utilities that describe the motion.

How it works

animate-in / animate-out are the triggers — they start the animation. The modifiers (fade-in, zoom-in, slide-in-top-*, …) only describe _how_ the element moves; on their own they do nothing until a trigger runs. This means you can put the modifiers on the element unconditionally and only toggle the trigger:

The state prefix appears twice (on the triggers), not on every modifier.

Timing

Duration and easing use Tailwind's native utilities — no special classes needed:

• duration-* — sets the animation duration (defaults to 150ms). • ease-* — sets the timing function (see Easings). • delay-* — sets the animation delay.

Modifiers

Each modifier works without a value (using a sensible default) or with one for full control.

| Utility | Without value | With value |

| fade-in / fade-out | opacity from 0 | fade-in-90 (from 90%), fade-in-[0.7] | | zoom-in / zoom-out | scale from 0.95 | zoom-in-50, zoom-in-[0.8] | | blur-in / blur-out | blur 4px | blur-in-8, blur-in-[2px] | | spin-in / spin-out | _requires a value_ | spin-in-90, -spin-in-45, spin-in-[30deg] | | slide-in-{top,bottom,left,right} | _requires a value_ | slide-in-top-8, slide-in-left-[3rem] | | slide-out-{top,bottom,left,right} | _requires a value_ | slide-out-top-8 |

Naming: in means _where it comes from_, out means _where it goes to_. slide-in-top enters from above; slide-out-top exits upward.

Controls

| Utility | Sets |

| fill-mode-{none,forwards,backwards,both} | animation-fill-mode | | direction-{normal,reverse,alternate,alternate-reverse} | animation-direction | | repeat-{n,infinite} | animation-iteration-count | | play-state-{running,paused} | animation-play-state |

Scroll-driven

The same modifiers can be driven by scroll position instead of by time. Add a timeline and the animation plays as the element moves through the scrollport:

| Utility | Sets |

| timeline-view | Driven by the element crossing the scrollport | | timeline-scroll | Driven by the nearest scroll container | | timeline-scroll-root | Driven by the document's scroll progress | | timeline-scroll-self | Driven by the element's own scroll progress | | timeline-none | Detaches, back to a time-based animation | | timeline-{cover,contain,entry,exit,entry-crossing,exit-crossing} | animation-range |

A progress-based timeline needs animation-duration: auto, which the timeline-* utilities supply for you. An explicit duration-* still wins, so you can mix the two freely.

For a compound range, reach for the arbitrary property:…

Description from the npm listing.