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:
@@ -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: {
|
||||
|
||||
Reference in New Issue
Block a user