Tailwind v4 with a CSS-First Theme

This library runs Tailwind v4 with the CSS-first configuration model: no tailwind.config.js for the design system, just cascade layers and CSS variables.

CSS-first setup

Tailwind v4 is wired through the PostCSS plugin:

@import "tailwindcss";
@plugin "@tailwindcss/typography";

Because the config lives in CSS, theme extensions are also CSS — utility classes are generated from variables you declare.

The theme tokens

Design tokens are exposed as CSS custom properties so they work with any tool that reads CSS variables:

--primary: #465fff;
--background: #0a0a0a;
--card: #111111;
--border: #2b2b2b;

Beyond colors, the system defines spacing-sensitive shadows such as shadow-theme-sm/md/lg/xl, so every surface gets shadows that scale with the theme rather than hardcoding values.

Utilities build on tokens

Component classes use the tokens directly, which keeps dark and light mode (forced dark here, but portable) a single variable swap:

className="bg-card border-border text-muted-foreground shadow-theme-md"

Key takeaways

• Move theme values into CSS variables to keep tailwind.config.js out of the way.
• Name shadows meaningfully (shadow-theme-md) instead of repeating arbitrary values.
• Structure tokens so a light/dark swap is one variable definition, not a class rewrite.