Así que tengo un caso de uso muy extraño. Necesito dos archivos de viento de cola construidos con el color primario cambiado en cada uno.
Aquí hay un ejemplo.
const primaryTheme = { '50': '#fff3e0', '100': '#ffe0b2', '200': '#ffcc80', '300': '#ffb74d', '400': '#ffa726', '500': '#ff9800', '600': '#fb8c00', '700': '#f57c00', '800': '#ef6c00', '900': '#e65000', }; module.exports = { ... theme: { extend: { colors: { primary: primaryTheme, } ...entonces ese sería un archivo y el otro intercambiaría la const del tema principal para decir esto
primaryTheme = { '50': '#e6f5ea', '100': '#c2e7cb', '200': '#9bd7ab', '300': '#71c889', '400': '#4fbc70', '500': '#27b057', '600': '#1da14d', '700': '#0f8f41', '800': '#007e37', '900': '#005f23', }así que cuando necesito construir para producción, intento cambiar las variables de color a un conjunto de colores predefinidos.
Entonces, una compilación podría generar dos archivos app.css
app-blue.css app-green.cssspor ejemplo, con las variables del tema principal cambiadas.
¿Hay alguna manera de automatizar esto para no tener que ingresar y cambiar manualmente la constante por un color diferente cada vez y luego cambiar los nombres de los archivos?
actualmente en este momento estoy construyendo a través de npx pero también podría con postcss
"scripts": { "dev": "npx tailwindcss -i ./wwwroot/css/tailwind.css -o ./wwwroot/css/app.css --watch", "build": "npx tailwindcss -i ./wwwroot/css/tailwind.css -o ./wwwroot/css/app.css --minify" },Estoy buscando generar solo los archivos múltiples en "compilar" si eso lo hace más fácil.
Muchas gracias de antemano por cualquier pista u orientación :)