Construye el archivo app.css completo de Tailwind 3 utilizando Laravel Mix en un contenedor Docker.
He configurado Laravel en un contenedor Docker y lo he lanzado utilizando Laravel Sail. Estoy utilizando Laravel mix con la versión 3 de Tailwind para incluir mi CSS. El problema es que quiero que todo el CSS de Tailwind se compile en mi archivo resources/css/app.css
.
tailwind.config.js
module.exports = {
content: [
"./resources/**/*.blade.php",
"./resources/**/*.js",
"./resources/**/*.vue",
],
theme: {
extend: {},
},
plugins: [],
}
webpack.mix.js
const mix = require('laravel-mix');
mix.options({
legacyNodePolyfills: false
});
mix.js('resources/js/app.js', 'public/js')
.postCss('resources/css/app.css', 'public/css', [
require("tailwindcss"),
]);
Normalmente ejecuto ./vendor/bin/sail npm run watch
desde el directorio de mi aplicación dentro del contenedor Docker para compilar resources/css/app.css
. Sin embargo, el proceso de compilación lleva tiempo y el comando watch
no parece detectar cambios ni compilar automáticamente. Supongo que se debe a mi entorno de desarrollo subóptimo (Intel Core i3 y 4 GB de RAM).
Parece que solo se compilan las clases de Tailwind CSS contenidas en los archivos especificados en la clave content
de tailwind.config.js
hacia resources/css/app.css
, ya que tengo que volver a ejecutar ./vendor/bin/sail npm run watch
cada vez que hago cambios en mis plantillas blade para ver los cambios en mi navegador, lo cual es tedioso. Además, no puedo utilizar mi navegador web (Google Chrome) para inspeccionar el CSS y realizar cambios de forma dinámica para ver el efecto en mi navegador.
Ya he intentado eliminar todos los archivos en la clave content
de tailwind.config.js
, es decir, content: []
, pero el resultado en resources/css/app.css
fue casi vacío, lo que ocasionó que el CSS de Tailwind en mis plantillas blade no funcionara.
¿Existe alguna forma de modificar tailwind.config.js
o webpack.mix.js
para que simplemente pueda ejecutar ./vendor/bin/sail npm run dev
una vez, y que compile todo el CSS de Tailwind en resources/css/app.css
? No quiero incluir enlaces de CSS de Tailwind en la cabecera de mi HTML.
davy.ai
Sí, hay una forma de modificar
tailwind.config.js
ywebpack.mix.js
para compilar todo el CSS de Tailwind enresources/css/app.css
al ejecutar./vendor/bin/sail npm run dev
.En primer lugar, agrega la clave
purge
a tu archivotailwind.config.js
como se muestra a continuación. Esta clave le indicará a Tailwind que solo incluya las clases utilizadas en el CSS compilado, lo que reducirá significativamente el tamaño del archivo.En segundo lugar, actualiza tu archivo
webpack.mix.js
agregando el métodopurgeCss()
a la cadena del métodopostCss()
como se muestra a continuación.El método
purgeCss()
eliminará las clases de CSS no utilizadas del CSS compilado, lo que resultará en un archivo de menor tamaño.Con estos cambios, al ejecutar
./vendor/bin/sail npm run dev
se compilará todo el CSS de Tailwind enresources/css/app.css
, y cualquier cambio en tus plantillas Blade o archivos CSS se compilarán automáticamente con el comandowatch
.Este enfoque debería ayudarte a resolver los problemas que tenías con tu entorno de desarrollo subóptimo, y ahora podrás utilizar las herramientas de desarrollo de tu navegador para inspeccionar el CSS y realizar cambios de forma dinámica.