Cuando un proyecto con Tailwind CSS está listo para salir a producción, el peso del archivo de estilos puede ser un problema real. Tailwind incluye miles de clases utilitarias, breakpoints y variantes que probablemente no se usan en su totalidad. La solución está en el purge CSS, un proceso que elimina automáticamente todo lo que no necesitas y deja únicamente los estilos que tu proyecto utiliza.
¿Qué es el purge CSS y por qué es importante?
El purge CSS es el proceso mediante el cual se analizan los archivos de tu proyecto y se remueven todas las clases CSS que no están siendo referenciadas en el código [0:12]. Tailwind, por su naturaleza de utility-first framework, genera un archivo de estilos muy amplio durante el desarrollo. Esto es útil para trabajar con rapidez, pero en producción representa una carga innecesaria.
La documentación oficial de Tailwind explica que el framework puede alcanzar tamaños considerables si no se optimiza. Gracias al purge, es posible reducir drásticamente ese peso, quedándote solo con lo esencial.
¿Cómo se configura el purge en el archivo de Tailwind?
Todo ocurre en el archivo de configuración de Tailwind (tailwind.config.js), dentro de la propiedad purge [1:42]. Aquí se especifican las rutas de los archivos que contienen clases de Tailwind. El proceso analiza esos archivos, identifica qué clases se están usando y elimina el resto.
- En proyectos simples, basta con indicar la ruta de los archivos HTML.
- Si el proyecto no usa templates adicionales y todo se renderiza en HTML, solo se apunta a esa extensión.
- La ruta debe coincidir con la ubicación real de los archivos; por ejemplo, si el HTML está en la carpeta
public, se indica esa carpeta y no source [2:12].
Esta configuración es cien por ciento personalizable, lo que permite adaptarla a cualquier estructura de proyecto.
¿Cuál es el comando para hacer el build de producción?
Desde la documentación, en la sección Building your CSS y específicamente en Building for production, se encuentra el comando necesario [2:52]. El proceso consiste en:
- Ejecutar el comando de build en la terminal.
- Indicar la ruta de entrada donde está el archivo CSS de configuración (por ejemplo,
source/css/).
- Indicar la ruta de salida donde se generará el CSS optimizado (por ejemplo,
public/css/).
- Agregar la bandera
--minify para comprimir aún más el archivo resultante.
El minify se encarga de reducir espacios, saltos de línea y caracteres innecesarios, logrando una optimización adicional sobre la optimización del purge [3:24].
¿Qué sucede durante y después del proceso de purge?
Al ejecutar el comando, el proceso puede tardar más de lo habitual porque está eliminando todos los estilos que no se utilizan en el proyecto [3:52]. Es normal que la terminal se quede procesando unos momentos.
Una vez completado, se debe verificar que:
- Todos los archivos, imágenes y estilos permanezcan intactos en el build.
- El proyecto funcione correctamente en el navegador.
- Las funcionalidades como el dark mode sigan operando sin problemas [4:16].
- La vista en dispositivos móviles se mantenga en orden, probando en distintas resoluciones como iPhone X [4:26].
Si todo permanece estable y los estilos se ven correctamente, el archivo CSS resultante está listo para producción con un peso significativamente menor.
¿Cómo compartir tu proyecto optimizado?
Con el archivo optimizado listo, una excelente opción es subirlo a GitHub Pages de manera gratuita [4:40]. Esta plataforma permite alojar sitios estáticos directamente desde un repositorio, lo que facilita compartir el resultado final con otros desarrolladores y recibir retroalimentación.
¿Ya lograste reducir el tamaño de tu CSS con el purge? Comparte tu proyecto y el link en los comentarios para que la comunidad pueda ver tu trabajo.
