Entiende cómo optimizar Tailwind en producción para generar solo las clases necesarias y evitar CSS inflado.
En local todo parece ir bien, pero en producción un CSS enorme penaliza carga y Core Web Vitals.
Tailwind soluciona esto generando solo utilidades detectadas en tus archivos de contenido.
La clave está en configurar bien rutas, evitar clases dinámicas mal construidas y usar safelist cuando toca.
En esta lección verás una estrategia práctica para pasar de demo rápida a build profesional optimizado.
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.
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.
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.
Entiende cómo optimizar Tailwind en producción para generar solo las clases necesarias y evitar CSS inflado.
Código del tema: Utilidades composables + responsive
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.
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.
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.