icamarillo
ae0bfc9d62
Problema: Las clases de colores retornadas por funciones JavaScript no eran detectadas por el purge de Tailwind, causando que los colores no se mostraran (aparecían grises). Solución: Agregar safelist en tailwind.config.js con todas las clases de colores usadas dinámicamente: - Colores de acciones: red, blue, green, indigo, orange, yellow - Colores de severidad/riesgo con variantes 100, 300, 600, 800 - Bordes y textos correspondientes - Estados hover y focus Esto asegura que Tailwind incluya estas clases en el CSS compilado independientemente de si se usan de forma estática o dinámica.
79 lines
1.4 KiB
JavaScript
79 lines
1.4 KiB
JavaScript
/** @type {import('tailwindcss').Config} */
|
|
export default {
|
|
content: ['./src/**/*.{html,js,svelte,ts}'],
|
|
safelist: [
|
|
// Colores de acciones
|
|
'bg-red-600',
|
|
'bg-blue-600',
|
|
'bg-green-600',
|
|
'bg-indigo-600',
|
|
'bg-orange-600',
|
|
'bg-yellow-500',
|
|
'bg-gray-600',
|
|
// Colores de severidad/riesgo
|
|
'bg-red-100',
|
|
'bg-red-800',
|
|
'bg-orange-100',
|
|
'bg-orange-300',
|
|
'bg-orange-600',
|
|
'bg-orange-700',
|
|
'bg-orange-800',
|
|
'bg-yellow-100',
|
|
'bg-yellow-300',
|
|
'bg-yellow-800',
|
|
'bg-blue-100',
|
|
'bg-blue-300',
|
|
'bg-blue-800',
|
|
'bg-green-100',
|
|
'bg-green-300',
|
|
'bg-green-800',
|
|
// Bordes
|
|
'border-red-300',
|
|
'border-orange-300',
|
|
'border-yellow-300',
|
|
'border-blue-300',
|
|
'border-green-300',
|
|
// Text colors
|
|
'text-red-600',
|
|
'text-red-800',
|
|
'text-orange-600',
|
|
'text-orange-800',
|
|
'text-yellow-800',
|
|
'text-blue-600',
|
|
'text-blue-800',
|
|
'text-green-600',
|
|
'text-green-800',
|
|
'text-white',
|
|
// Hover states
|
|
'hover:bg-red-700',
|
|
'hover:bg-orange-700',
|
|
'hover:bg-blue-700',
|
|
'hover:bg-indigo-700',
|
|
'hover:bg-indigo-50',
|
|
// Focus rings
|
|
'focus:ring-red-500',
|
|
'focus:ring-orange-500',
|
|
'focus:ring-blue-500',
|
|
'focus:ring-indigo-500',
|
|
],
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
primary: {
|
|
50: '#eff6ff',
|
|
100: '#dbeafe',
|
|
200: '#bfdbfe',
|
|
300: '#93c5fd',
|
|
400: '#60a5fa',
|
|
500: '#3b82f6',
|
|
600: '#2563eb',
|
|
700: '#1d4ed8',
|
|
800: '#1e40af',
|
|
900: '#1e3a8a',
|
|
}
|
|
}
|
|
}
|
|
},
|
|
plugins: [],
|
|
}
|