CSS-first Tailwind v4
Use @plugin "tailwind-hue-theme" in CSS-first Tailwind projects.
01 · Why it exists
Themes should change without rebuilding the CSS.
Tailwind gives teams strong color semantics, but switching a full palette at runtime is usually awkward. You either maintain parallel themes, generate CSS ahead of time, or move theming into JavaScript.
tailwind-hue-theme keeps the palette in CSS. Change one hue value and related tokens update together, using OKLCH so the perceived brightness and chroma stay more consistent across hues.
Model
One hue value drives a full semantic palette.
OKLCH tokens
Generated tokens vary hue while keeping lightness and chroma choices intentional.
Runtime theming
Set --brand-h from user preferences, tenant config, or server-rendered CSS.
Optional widget
A lightweight hue picker is available for projects that need direct user control.
02 · API
Use the plugin or consume the token map directly.
| Export | Use |
|---|---|
createHuePlugin() |
Returns a Tailwind plugin instance for CSS-first or JS config usage. |
buildTokens() |
Returns the raw token map without registering a Tailwind plugin. |
HuePicker |
Optional DOM widget imported from tailwind-hue-theme/widget. |
getWidgetCSS() |
Returns widget CSS for SSR or CSP-friendly injection. |
03 · Best fit
Useful when hue changes but semantics stay stable.
The plugin fits multi-tenant dashboards, customizable SaaS interfaces, white-label products, and design-system demos where users or accounts need their own brand hue.
It is not needed for a static brand palette. If the palette never changes at runtime, Tailwind's normal color tokens are simpler.