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} */
|
/** @type {import('tailwindcss').Config} */
|
||||||
export default {
|
export default {
|
||||||
content: ['./src/**/*.{html,js,svelte,ts}'],
|
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: {
|
theme: {
|
||||||
extend: {
|
extend: {
|
||||||
colors: {
|
colors: {
|
||||||
|
|||||||
Reference in New Issue
Block a user