Necesito tener un tema dinámico para mi sitio web que provenga de una base de datos, los valores posibles son theme-1 , theme-2 etc. y quiero que cada uno cambie la paleta de colores del sitio, es decir, el color primary del viento de cola es green para theme-1 pero blue para el theme-2 .
He intentado usar https://github.com/upupming/tailwindcss-themeable pero es una exageración ya que regenera todos los colores y tiene un prefijo muy engorroso y largo antes de cada clase. Quiero definir la clase 'tema-1' a nivel del body y hacer algo similar a este pseudocódigo
.theme-2 { /* primary-500 is now color: blue */ }Estoy usando Tailwind v2 debido a restricciones de dependencia.
Solución: use variables CSS.
principal.css
:root .theme-1 { --tw-text-opacity: 1; --color-primary-50: 235,242,254; --color-primary-100: 215,230,253; --color-primary-200: 176,205,251; --color-primary-300: 137,180,250; --color-primary-400: 98,155,248; --color-primary-500: 59,130,246; --color-primary-600: 11,97,238; --color-primary-700: 8,75,184; --color-primary-800: 6,53,131; --color-primary-900: 4,31,77; }tailwind.config.js
colors: { ... primary: { 50: 'rgba(var(--color-primary-50), var(--tw-text-opacity))', 100:'rgba(var(--color-primary-100), var(--tw-text-opacity))', 200:'rgba(var(--color-primary-200), var(--tw-text-opacity))', 300:'rgba(var(--color-primary-300), var(--tw-text-opacity))', 400:'rgba(var(--color-primary-400), var(--tw-text-opacity))', 500:'rgba(var(--color-primary-500), var(--tw-text-opacity))', 600:'rgba(var(--color-primary-600), var(--tw-text-opacity))', 700:'rgba(var(--color-primary-700), var(--tw-text-opacity))', 800:'rgba(var(--color-primary-800), var(--tw-text-opacity))', 900:'rgba(var(--color-primary-900), var(--tw-text-opacity))' } ...Ahora puede usar text-primary-500 y hacer que el color cambie con solo 1 clase principal