CSS custom properties + @theme inline for runtime theming

Pattern: define --accent-N vars → register with @theme inline { --color-accent-N: var(--accent-N); } → use bg-accent-N in components

Context

Tailwind v4’s @theme inline maps CSS vars to utility classes; applyAccentCSSVars() swaps at runtime

Reusability

• Score: 3/5
• Used in: haven

Source

Synced from ops-core learning data. Original source: haven # noqa: E501

See Also

• Patterns Index
• Code Organization