Installation

Add tw-jib-css-experimental to your TailwindCSS v4 project.

Install

Both packages, always. This one declares the stable package as a real peer dependency, not a convention — see Why both below.

npm

npm install -D tw-jib-css tw-jib-css-experimental

pnpm

pnpm add -D tw-jib-css tw-jib-css-experimental

yarn

yarn add -D tw-jib-css tw-jib-css-experimental

bun

bun add -D tw-jib-css tw-jib-css-experimental

Import

@import 'tailwindcss';
@import 'tw-jib-css';
@import 'tw-jib-css-experimental'; /* after stable: order carries the override */

Order is load-bearing

Same-name @utility blocks never merge. Tailwind emits both and the later one wins where its gate holds, so importing this package before the stable one costs you the overrides silently: no error, no warning, just the stable implementation still running.

That is the whole package. If you want a part of it, read on.

Take only what you need

Each module has a package sub-path export and stands on its own. This matters more here than in the stable package, because additions and overrides sit side by side and only the overrides can change markup you have already written. Taking an addition should not reroute classes you already use, so it doesn't:

@import 'tailwindcss';
@import 'tw-jib-css';
@import 'tw-jib-css-experimental/corner'; /* squircles, and nothing else */

Modules

Module	Import path	Kind
everything below	tw-jib-css-experimental	both
Functions	tw-jib-css-experimental/functions	Override
Corner shape	tw-jib-css-experimental/corner	Addition
Interpolate size	tw-jib-css-experimental/interpolate	Addition
Base select picker	tw-jib-css-experimental/picker	Addition
WCAG badge	tw-jib-css-experimental/wcag-badge	Addition

corner, interpolate and picker read nothing from tw-jib-css, so taking one of those carries no colour machinery at all. functions and wcag-badge do.

Why both

This is a separate package, never a sub-path: tw-jib-css/experimental does not exist.

The stable package is a peer dependency because the override lives in its files. The @utility blocks that call the @function dispatchers ship with tw-jib-css, gated on @custom-variants that only this package defines. Install this one alone and there is nothing for it to override; install the stable one alone and those gates resolve to a test no engine passes, so they stay inert.

The @function overrides

The functions module brings two things worth separating.

The first is an API: the colour transforms and the contrast solve as callable CSS functions, so a derived colour can go anywhere a colour goes rather than only where a utility happens to exist. Each primitive has its own page in the sidebar; the directional aliases --jib-lighten, --jib-darken, --jib-saturate and --jib-desaturate are documented alongside the primitive each one forwards to.

The second is an override. The module re-implements four families on top of those functions, and they win over the stable versions wherever CSS @function is supported. Same class names, same output, different machinery.

Utility family	Stable implementation	With this module
bg-lightness-*, bg-lighten-*, bg-darken-*	relative colour syntax	--jib-lightness()
bg-saturation-*, bg-saturate-*, bg-desaturate-*	relative colour syntax	--jib-saturation()
bg-hue-rotate-*	relative colour syntax	--jib-hue-rotate()
text-contrast-*	nested relative-colour chain	--jib-auto-contrast()

Both paths compute the same closed forms. Measured against each other they agree to serialisation precision, so you cannot tell from the output which one ran. The override exists because @function expresses the maths with local bindings instead of one deeply nested expression, which is easier to maintain.

Automatic contrast itself is not experimental. text-contrast-aa, text-contrast-aaa and text-contrast-aa-lg ship from the stable entry, exact on Chromium, Firefox and Safari alike. Only the measuring half stayed here: the badge that names a rating needs if(style()), because reading a rating out means turning a colour into a string. The shade solves in closed-form relative colour syntax; the badge cannot.

Browser support

Everything here needs features that are not yet baseline, and most of it is Chromium-only today.

All of it sits behind an @supports gate, so an engine without the feature ignores the utility rather than breaking on it. For the four overridden families that means falling through to the stable implementation and producing the same result — importing this package is safe everywhere, it simply does less in some places.

The one capability with no stable fallback is --jib-wcag-rating(), which returns a string rather than a colour. Nothing in relative colour syntax can turn a colour into a word, so that one is genuinely absent elsewhere rather than differently implemented.

Per-module status is on each module's page, and in the live pills below.

The stable package

If you have not installed tw-jib-css yet, start with its installation guide. Nothing in that package runs CSS @function, which is the guarantee that covers you if you opted into nothing here.

Baseline status

What these utilities are built on, live from the Web Platform Dashboard.