NOTAS WEB

Integración Efectiva de Tailwind CSS en Proyectos Laravel

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.

Incorporar Tailwind CSS en Laravel puede transformar completamente el desarrollo de tu interfaz, brindando estilos modernos y responsivos con facilidad. Este tutorial te guiará por cada paso necesario para añadir Tailwind CSS a tu proyecto Laravel, desde la configuración inicial hasta la compilación de estilos.

Instalar npm en tu proyecto Laravel

Antes de integrar Tailwind CSS, es esencial tener npm instalado en tu proyecto Laravel. Abre tu terminal y ejecuta

npm install

Este comando instala todas las dependencias necesarias definidas en tu archivo package.json.

Agregando Tailwind CSS a tu proyecto

Para utilizar Tailwind CSS, primero debes importar sus estilos base, componentes y utilidades en tu archivo resources/css/app.css. Añade el siguiente código:

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

Modificar el archivo webpack.mix.js

Modifica el archivo webpack.mix.js para incluir las directivas de Tailwind CSS, permitiendo la compilación de tus estilos personalizados:

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

Compilando los estilos

Con las configuraciones listas, compila tus estilos ejecutando:

npm run dev

Este comando generará tu hoja de estilos en public/css/app.css, incluyendo todos los estilos de Tailwind CSS.

Aplicando estilos en tus vistas

Para aplicar Tailwind en tus vistas, asegúrate de vincular la hoja de estilos compilada en tus archivos blade <link rel=»stylesheet» href=»{{ asset(‘css/app.css’) }}»>

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

Solución de Problemas

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: [],
}

Después, ejecuta npm run dev o npm run watch para compilar tus estilos nuevamente.

La integración de Tailwind CSS en Laravel potencia la creación de interfaces dinámicas y responsivas. Siguiendo estos pasos, podrás disfrutar de los beneficios de Tailwind en tu desarrollo web con Laravel.

Otras entradas de interes