Nejlepší řešení: CSS proměnné (design tokens) Tailwind konfigurovat přes CSS variables // tailwind.config.js export default { theme: { extend: { colors: { primary: 'rgb(var(--color-primary) / <alpha-value>)', success: 'rgb(var(--color-success) / <alpha-value>)', } } } } Použít je v komponentách

Barvy definovat mimo aplikaci /* theme.css – měnitelné bez buildění / :root { --color-primary: 37 99 235; / blue-600 / --color-success: 22 163 74; / green-600 */ }

Nebo dynamicky: <script> document.documentElement.style.setProperty( '--color-primary', '220 38 38' // red-600 ) </script>

Přepínání témat (light / dark / custom klient) :root[data-theme="blue"] { --color-primary: 37 99 235; }

:root[data-theme="red"] { --color-primary: 220 38 38; }

document.documentElement.dataset.theme = 'red'

nebo předevinovat po tailwindu /* overrides.css – načíst až po tailwind.css */ .btn-primary { background-color: rgb(var(--color-primary)); color: white; }