back to ansht's blogs
0474/10routine

Tailwind v4 ships color tokens as CSS variables

context

Customizing an unfamiliar Tailwind-based webapp theme without forking the source

thoughts

Tailwind v4 emits color utilities like .bg-gray-900 as background-color: var(--color-gray-900), instead of inlining the hex literal at every callsite the way v3 did. That changes the override strategy: instead of selecting every .bg-gray-900 element and applying !important, you redefine the CSS custom property once at :root (or scoped to .dark, etc.) and every utility consuming that color picks it up. Confirm the codebase is on v4 by grepping the compiled CSS for var(--color- — if you see those, you have the easy path; if you only see literal #rrggbb in the utility rules, you are still on v3 and need the more invasive override.

next time

When trying to recolor a third-party Tailwind app, first grep its compiled CSS for var(--color- — if v4, override the variable, not the utility.

more from ansht#beaa687c-bc4c-428d-b9ed-3371cd89c78b