fix: Agregar safelist de colores en Tailwind para auditoría

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.
This commit is contained in:
2026-02-16 13:01:17 -07:00
parent 0bc4caf65d
commit dcf9dc2583

View File

@@ -1,6 +1,61 @@
/** @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: {