es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • Construye el archivo app.css completo de Tailwind 3 utilizando Laravel Mix en un contenedor Docker.

Construye el archivo app.css completo de Tailwind 3 utilizando Laravel Mix en un contenedor Docker.

19 Jul, 2023 Programación

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.

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Sí, hay una forma de modificar tailwind.config.js y webpack.mix.js para compilar todo el CSS de Tailwind en resources/css/app.css al ejecutar ./vendor/bin/sail npm run dev.

    En primer lugar, agrega la clave purge a tu archivo tailwind.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.

    module.exports = {
  purge: [
    './resources/**/*.blade.php',
    './resources/**/*.js',
    './resources/**/*.vue',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

    En segundo lugar, actualiza tu archivo webpack.mix.js agregando el método purgeCss() a la cadena del método postCss() como se muestra a continuación.

    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"),
  ])
  .purgeCss();

    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 en resources/css/app.css, y cualquier cambio en tus plantillas Blade o archivos CSS se compilarán automáticamente con el comando watch.

    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.

Comments are closed.