Solución: las clases de Tailwind CSS no se aplican

¿Por qué ocurre?

Tailwind elimina (purga) las clases que no detecta en tus archivos para reducir el tamaño del CSS final. Si la ruta de tus archivos no está en la configuración `content`, Tailwind no incluirá esas clases en el build. También ocurre cuando construyes clases dinámicamente concatenando strings.

Solución paso a paso

Caso 1 — Rutas content mal configuradas:

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  // ❌ No cubre todos los archivos
  content: ['./src/**/*.html'],  // ✅ Cubre todos los tipos de archivo donde uses Tailwind
  content: [
    './src/**/*.{html,js,ts,jsx,tsx,astro,vue,svelte}',
    './index.html',
  ],
};

Caso 2 — Clases construidas dinámicamente (NO funcionan con Tailwind):

// ❌ Tailwind no puede detectar estas clases al analizar el código
const color = 'red';
text-${color}-500} />   // ← no aparece como clase completa
const tamaño = 500;
w-${tamaño}} />         // ← ídem
// ✅ Usa la clase completa o un objeto de mapeo
const colorClases = {
  red: 'text-red-500',
  blue: 'text-blue-500',
  green: 'text-green-500',
};
    // ← clase completa en el código
// ✅ O usa safelist para clases dinámicas que no aparecen en el código
// tailwind.config.js
module.exports = {
  safelist: [
    'text-red-500', 'text-blue-500', 'text-green-500',
    { pattern: /bg-(red|blue|green)-(100|200|500)/ }, // patrón regex
  ],
};

Caso 3 — Especificidad CSS (otro estilo gana):

/* globals.css */
@layer base {
  /* Estilos base — menor especificidad */
}
@layer components {
  .mi-boton { @apply px-4 py-2 bg-blue-500; }
}
@layer utilities {
  /* Utilidades — mayor especificidad */
}

Caso 4 — Dev server no recargó la nueva configuración:

# Después de cambiar tailwind.config.js, reinicia:
# Ctrl+C → npm run dev

Verificar que Tailwind está generando la clase:

# Busca si la clase está en el CSS compilado
grep -r "text-red-500" dist/
# Si no aparece → no está siendo incluida (problema de content paths)

Cómo evitarlo en el futuro

Configura `content` en tailwind.config.js con todos los tipos de archivo del proyecto desde el inicio. Nunca construyas nombres de clases con template literals — escribe siempre el nombre completo de la clase en el código.