Skip to main content
Tailwind v4 generates utilities from theme variables. Point those variables at Livry’s custom properties and every utility in your app rebrands when the stylesheet changes. Theme integration required: a pair whose library is Tailwind CSS. It builds tokens.css.
Before your own CSS — see Plain CSS.

​
2. Map the variables

The left-hand names are Tailwind’s and yours to choose; the right-hand ones come from Livry’s stylesheet.
inline reference — both keywords, and both load-bearing.reference, because the names collide. Livry’s --color-brand-primary and Tailwind’s theme variable of the same name are the same CSS custom property. A plain @theme would emit Tailwind’s own :root { --color-brand-primary: var(--color-brand-primary) } — a cycle, which CSS resolves to the property being invalid, and depending on stylesheet order it would blank Livry’s value too. reference registers the variable for utility generation without emitting it, so nothing shadows the stylesheet.inline, because the value must travel. It makes each utility carry the value written here — var(--color-brand-primary, #5B4DE4) — rather than a reference to Tailwind’s copy. That is what makes swapping Livry’s stylesheet rebrand every utility.Verified against tailwindcss 4.3.3: @theme options are independent bit flags, so the two combine. If you are on an older 4.x, check that your build honours both before shipping.

​
3. Use the utilities

Nothing here names a colour. Swap the stylesheet and the button restyles.

​
Which namespace a token belongs in

Tailwind’s theme namespaces decide which utilities get generated. The useful mapping:
Tailwind has no namespace for several token categories — sizes, durations, gradients, borders, border widths, z-index and opacity among them.Those tokens are still in tokens.css and still usable; you just reference them directly with var() in arbitrary values rather than getting a utility:

​
Generate the mapping

Writing this by hand for 400 tokens is not the plan. The portal’s Integration tab generates the whole @theme block from your actual Theme, categorised and pre-filled, and lists any category Tailwind has no namespace for rather than dropping it silently. Copy it once, then edit freely — which Tailwind name each variable becomes is your naming decision, and it stays right for every Variant, because a Variant changes values and never names.

​
Switching brands

Exactly as Plain CSS: change the href, and every generated utility recomputes with no re-render and no rebuild.