Installation

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

Install

npm

npm install -D tw-jib-css

pnpm

pnpm add -D tw-jib-css

yarn

yarn add -D tw-jib-css

bun

bun add -D tw-jib-css

Import

Import it alongside TailwindCSS:

@import 'tailwindcss';
@import 'tw-jib-css';

That is the whole library. If you want a part of it, read on. Every module is also its own entry point.

Take only what you need

Each module has a package sub-path export and stands entirely on its own. Want accessible text shades and nothing else? Import that one module. You do not get comic halftones, ripples or gradient borders as the price of admission:

@import 'tailwindcss';
@import 'tw-jib-css/automatic-contrast';

Import several and they compose exactly as they do from the root entry:

@import 'tailwindcss';
@import 'tw-jib-css/automatic-contrast';
@import 'tw-jib-css/border-gradient';
@import 'tw-jib-css/grid';

Why this is worth doing

Not bundle size. Tailwind's scanner purges classes you never write regardless, so an unused utility costs you nothing either way.

What it saves is the part the scanner cannot reach. @property registrations and @theme keys are not classes, so Tailwind emits them whether or not anything uses them. The color pipeline that bg-lighten-* and text-contrast-* read from is a few dozen registrations, and importing the root entry emits all of them. Importing tw-jib-css/grid emits none: those utilities read no color, so they carry no color machinery.

It also keeps your browser-support floor honest. grid and border-style are plain CSS properties and need nothing modern at all. See Browser support.

Modules

Module	Import path	Color pipeline
everything below	tw-jib-css	yes
Automatic Contrast	tw-jib-css/automatic-contrast	yes
Lightness, Saturation and Hue Rotate	tw-jib-css/color-transforms	yes
Border Gradient	tw-jib-css/border-gradient	yes
Ripple	tw-jib-css/ripple	yes
Comic	tw-jib-css/comic	yes
Pixel	tw-jib-css/pixel	yes
Border Style	tw-jib-css/border-style	no
Grid	tw-jib-css/grid	no

Lightness, saturation and hue-rotate ship as one module rather than three because they are one pipeline: each stage's expression starts from the stage before it, so a stage taken alone would compute against a value nothing can write.

Taking the whole library costs no more per utility than taking a single module. The root entry composes so the shared color pipeline lands once, not once per module. Tests cover both directions: that each module resolves every var() it emits when taken alone, and that the combined entry never re-emits the shared core.

Browser support

• TailwindCSS 4.3+. The library uses the CSS-first @utility, @custom-variant, @theme and @property syntax, and uses the --value() and --default() functional-utility forms that 4.3 requires. It declares tailwindcss >=4.3.0 as a peer dependency.
• Color utilities. Anything that transforms a color needs CSS relative color syntax and @property. That covers automatic contrast, the color transforms, comic and pixel; border gradients and ripple need @property but no relative color syntax. The lightness and saturation transforms also use the abs() and sign() math functions, which reached Chromium later than the rest and so set the floor for the whole package. Each module page carries live Baseline pills for the features it is built on.
• border-style and grid. Plain CSS properties, no relative color syntax, no registrations. They work wherever Tailwind itself does.

Nothing in this package runs CSS @function. That is deliberate, and it is the guarantee that covers you if you opted into nothing.

Experimental features

Not-yet-baseline features live in a separate package, tw-jib-css-experimental: CSS @function color transforms, corner-shape, interpolate-size, a styleable <select> and a live WCAG contrast badge. It is mostly Chromium-only and it declares this package as a peer dependency.

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

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

It is its own package, never a sub-path of this one: tw-jib-css/experimental does not exist. Its modules are individually importable on the same principle as above (tw-jib-css-experimental/corner and siblings), which matters more there than here, because half of that package overrides utilities this one ships. Taking an addition should not reroute classes you already use, so it doesn't.

Read its installation guide before installing.

Baseline status

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