Published on

Implementar Tailwind en tú proyecto Laravel

Authors

Laravel 8 llegó con muchas novedades, entre ellas, que dejo de utilizar Bootstrap para la creación de su interfaz gráfica, y desde ahora lo hace con la librería Tailwind CSS.

Instalar npm en tu proyecto Laravel

Para poder instalar Tailwind CSS, necesitamos tener instalado npm en nuestro proyecto. Para instalar npm debemos ejecutar el siguiente comando:

npm install

Agrega Tailwind CSS a nuestro proyecto

El siguiente paso es importar los estilos de base, componentes y utilidades de Tailwind dentro del archivo resource/css/app.css

Copia y pega el siguiente código, en dicho archivo.

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

Modificar el archivo webpack.mix.js

Ahora debemos dirigirnos al archivo webpack.mix.js, e indicarle que queremos trabajar con las directivas de Tailwind. Para poder lograrlo debemos modificar un poco dicho archivo.

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [
        require('tailwindcss'),
    ]);

Compilar nuestros estilos

El siguiente paso es compilar el contenido del archivo  resource/css/app.css con el siguiente comando:

npm run dev

Esto creará una nueva hoja de estilo css, en la carpeta public/css/app.css dentro del cual estará cargado todos los estilos del framework.

Agregando estilos a nuestras vistas

Lo último que debemos de hacer, es agregarle los estilos a las vistas en las que queremos utilizar Tailwind 

Si al ejecutar el npm run dev te marcara este error


<link rel="stylesheet" href="{{asset('css/app.css')}}">

Si al ejecutar el npm run dev te marcara este error 
Asegúrate de tener creado en la raíz del proyecto el fichero  "tailwind.config.js", de no ser así, créalo y añade el siguiente código:
module.exports = {
  content:[
    "./resources/**/*.blade.php",
    "./resources/**/*.js",
    "./resources/**/*.vue",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Por último vuelve a ejecutar npm run dev o npm run watch

1585