¿Qué problema suele ocurrir cuando configuras mal la propiedad content?

Si Tailwind no detecta clases durante el escaneo, no las genera en el CSS final de producción.

Tailwind CSS

Rendimiento en producción: content, purge y build limpio

Entiende cómo optimizar Tailwind en producción para generar solo las clases necesarias y evitar CSS inflado.

¿Cuánto sabes de Tailwind CSS?

📘 Teoría

Configurar content con precisión

Si content está mal definido, Tailwind no verá clases y el resultado en producción fallará.

Incluye todas las rutas reales donde aparecen clases: componentes, páginas y plantillas.

No añadas rutas gigantes innecesarias porque ralentizan análisis del build.

Revisa especialmente directorios de UI compartida y vistas dinámicas.

Ejemplo de configuración content

Revisar

// tailwind.config.js
export default {
  content: [
    './index.html',
    './src/**/*.{js,ts,jsx,tsx,astro}'
  ],
  theme: {
    extend: {}
  },
  plugins: []
};

Cuidado con clases dinámicas

Construir clases como strings arbitrarios puede dejar utilidades fuera del build final.

Patrones como `bg-${color}-500` no siempre se detectan por el parser de contenido.

Prefiere mapear variantes explícitas o usa safelist para casos controlados.

Menos magia dinámica y más configuración explícita suele ser más robusto.

Cuándo usar safelist

Safelist es útil en contenido generado dinámicamente, pero úsalo con criterio.

No metas 300 clases por si acaso: aumentas CSS sin necesidad.

Añade solo las utilidades realmente requeridas por CMS o lógica runtime.

Documenta por qué cada grupo está en safelist para mantenimiento futuro.

1 Configurar content con precisión 2 Cuidado con clases dinámicas 3 Cuándo usar safelist

🧪 Aprende probando

Ejemplo Demo: versión CDN y adaptación a producción Primero prototipas con CDN y luego trasladas utilidades a un build configurado con content correcto.

⌄