¿Cómo compilar los archivos css con Tailwind para producción?
Tailwind tiene un gran performance que se enfoca en generar los archivos CSS con el menor tamaño posible, generando solo el CSS que se utiliza dentro del proyecto.
Combinar la minimización y la compresión de red provoca por lo general archivos menos de 10kb, incluso para proyectos grandes. Por ejemplo, Netflix utiliza Tailwind y el sitio web completo tiene un peso de 6.5kb de archivos CSS.
Con archivos CSS tan pequeños no es necesario implementar soluciones complejas como dividir el código CSS en un archivo por cada página, en su lugar podemos utilizar solo un archivo CSS que es descargo y utilizado a través de todo el sitio.
Para obtener el archivo mas pequeño posible, se recomienda minimizar tus archivos CSS como una herramienta como cssnano y comprimir tus archivos CSS con Brotli.
Si estas utilizando Tailwind CLI, puedes minimizar los CSS agregando la opción --flag.
npx tailwindcss -o build.css --minify
Si instalaste PostCSS, puedes utilizar cssnano al final de tu lista de plugins en el archivo postcss.config.js.
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
...(process.env.NODE_ENV === 'production' ? { cssnano: {} } : {}),
},
}
Si estas utilizando un framework, revisa la documentación ya que por lo general esto es manejado de manera automática en producción y no se requiere configurarlo.