Cómo instalar Tailwind CSS en Laravel

En este tutorial vamos a ver cómo instalar Tailwind en Laravel. Tailwind es un framework CSS utility-first que proporciona una serie de clases CSS. Estas clases permiten dar estilos a las diferentes etiquetas HTML sin la necesidad de escribir ni una sola línea de código CSS. En cuanto a Laravel, se trata del framework PHP más utilizado por los desarrolladores PHP.

En esta guía nos centraremos en la configuración inicial de ambas herramientas, creando así un proyecto base que podrás usar como punto de partida.

Instalación de Laravel

Este tutorial no pretende ser una guía de instalación de Laravel, así que instalaremos Laravel con sus opciones más básicas, si es que todavía no has creado un nuevo proyecto. Laravel necesita que tengas instalada la versión más reciente de PHP y también composer. Si no tienes PHP instalado en tu sistema operativo, consulta el tutorial en donde se explica cómo instalar PHP en Windows. También usaremos la línea de comandos. Si no sabes utilizarla consulta qué es la línea de comandos y cómo se utiliza.

Para instalar Laravel sigue estos pasos:

1. Accede al directorio en el que quieres crear un nuevo proyecto.
2. Ejecuta el siguiente comando para crear un proyecto, reemplazando nuevo-proyecto por el nombre del proyecto que quieres crear:

   composer create-project laravel/laravel nuevo-proyecto

3. Luego accede al proyecto usando el comando cd:

   cd nuevo-proyecto

4. Inicial servidor local usando el siguiente comando:

   php artisan serve

5. Con esto ya habrás creado el proyecto con Laravel.

A continuación veremos cómo instalar Tailwind en Laravel.

Instalación de Tailwind CSS en Laravel

Antes de instalar Tailwind tendrás que haber instalado tanto Node.js como el gestor de paquetes npm en tu sistema. Para saber si tienes Node.js instalado usa el comando node -v, que mostrará la versión de Node.js de tu sistema. Para saber si tienes instalado npm, usa el comando npm -v, que del mismo modo también mostrará la versión instalada. Si no lo tienes instalado, consulta el tutorial de instalación de node.js.

Podrás instalar Tailwind CSS tanto usando Vite como Laravel Mix. Se recomienda que uses Vite, aunque puedes usar el método que más te guste.

Instalación de Tailwind en Laravel usando Vite

Para instalar Tailwind en Laravel usando Vite, sitúate en el directorio de instalación de Laravel y sigue estos pasos:

1. Instala Tailwind y sus dependencias mediante el comando npm:

   npm install -D tailwindcss postcss autoprefixer

2. Luego ejecuta el siguiente comando para inicializar Tailwind y crear los archivos de configuración tailwind.config.js y postcss.config.js:

   npx tailwindcss init -p

   A modo de información, el flag -p se usa para crear el archivo postcss.config.js.

3. A continuación edita el archivo tailwind.config.js y agrega las rutas hacia los archivos de plantilla con extensión .blade de Laravel, así como también hacia los posibles archivos JavaScript, Vue o React, de haberlos:

   /** @type {import('tailwindcss').Config} */
   module.exports = {
     content: [
       "./resources/**/*.blade.php",
       "./resources/**/*.js",
       "./resources/**/*.vue",
     ],
     theme: {
       extend: {},
     },
     plugins: [],
   }

4. Luego edita el archivo /resources/css/app.css de Laravel y agrega las directivas de los diferentes componentes o capas de Tailwind:

   @tailwind base;
   @tailwind components;
   @tailwind utilities;

5. Con esto ya habrás configurado Tailwind usando Vite.

En el siguiente apartado veremos cómo instalar y configurar Tailwind en Laravel usando Laravel Mix.

Instalación de Tailwind en Laravel usando Laravel Mix

Para instalar Tailwind en Laravel usando Laravel Mix, sitúate en el directorio de instalación de Laravel y sigue estos pasos:

1. Instala Tailwind y sus dependencias mediante el comando npm:

   npm install -D tailwindcss postcss autoprefixer

2. Luego ejecuta el siguiente comando para inicializar Tailwind y generar el archivo de configuración tailwind.config.js de Tailwind:

   npx tailwindcss init

3. Ahora vamos a configurar Laravel para que pueda usar y gestionar las clases CSS de Tailwind. Para ello edita el archivo webpack.mix.js y agrega tailwindcss como un plugin de PostCSS:

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

4. Luego edita el archivo tailwind.config.js y agrega las rutas en donde se encuentran los archivos .blade de Laravel, así como también los posibles archivos JavaScript, Vue o React:

   /** @type {import('tailwindcss').Config} */
   module.exports = {
     content: [
       "./resources/**/*.blade.php",
       "./resources/**/*.js",
       "./resources/**/*.vue",
     ],
     theme: {
       extend: {},
     },
     plugins: [],
   }

5. Finalmente debes editar el archivo /resources/css/app.css de Laravel para agregar las directivas de los diferentes componentes o capas de Tailwind:

   @tailwind base;
   @tailwind components;
   @tailwind utilities;

6. Con esto ya habrás configurado Tailwind.

A continuación vamos a ver cómo comenzar a usar Tailwind. Aunque primero veremos también cómo configurar Tailwind con Sass.

Cómo usar Sass con Tailwind en Laravel

También puedes usar código SCSS en lugar de CSS integrando Sass con Laravel. Por ello vamos a ver cómo instalar y configurar Tailwind para que funcione en Laravel con Sass.

Lo primero que tendrás que hacer es crear la carpeta /sass en el directorio /resources de Laravel. Luego crea el archivo app.scss en su interior y sigue los pasos que ves a continuación en función del método de configuración de Tailwind que prefieras utilizar, ya sea usando Vite o mediante Laravel Mix.

Configura Sass con Tailwind en Laravel usando Vite

Para instalar Tailwind y configurarlo con Saas en Laravel usando Vite, accede al directorio de instalación de Laravel y sigue los pasos que se muestran a continuación:

1. Primero asegúrate de que has configurado Tailwind en Laravel mediante Vite tal y como hemos visto en al anterior apartado.
2. nte directiva, que indicEdita el archivo webpack.mix.js que encontrarás en el directorio raíz del proyecto, reemplazando la siguiente línea:

   .postCss('resources/css/app.css', 'public/css');

   Por la siguiente directiva, que indicará a Laravel Mix que debe compilar los archivos Sass del directorio resources/sass/app.scss:

   .sass('resources/sass/app.scss', 'public/css')

   El archivo debería quedar así:

   mix.js('resources/js/app.js', 'public/js')
       .sass('resources/sass/app.scss', 'public/css')

3. Finalmente guarda el archivo.

Tras esto, ya podrás usar código SCSS junto con Tailwind.

Configura Sass con Tailwind en Laravel usando Laravel Mix

Para instalar Tailwind en Laravel usando Laravel Mix, sitúate en el directorio de instalación de Laravel y sigue estos pasos:

Para instalar Tailwind y configurarlo con Saas en Laravel usando Laravel Mix, accede al directorio de instalación de Laravel y sigue los pasos que se muestran a continuación:

1. Primero asegúrate de que has configurado Tailwind en Laravel mediante Laravel Mix tal y como hemos visto en al anterior apartado.
2. Edita el archivo webpack.mix.js que encontrarás en el directorio raíz del proyecto, incluyendo la constante tailwindcss en la parte superior del archivo:

   const tailwindcss = require('tailwindcss');

3. Luego reemplaza la siguiente línea en el archivo webpack.mix.js::

   .postCss('resources/sass/app.scss', 'public/css');

   Por la siguiente directiva, que indicará a Laravel Mix que debe compilar los archivos Sass del directorio resources/sass/app.scss, configurando Tailwind como un Plugin de PostCSS:

   .sass('resources/sass/app.scss', 'public/css')
   .options({
     processCssUrls: false,
     postCss: [tailwindcss('./tailwind.config.js')],
   })
   .version();

   El archivo debería quedar así:

   const mix = require('laravel-mix');
   const tailwindcss = require('tailwindcss');
   
   mix.js('resources/js/app.js', 'public/js')
       .sass('resources/sass/app.scss', 'public/css')
       .options({
           processCssUrls: false,
           postCss: [tailwindcss('./tailwind.config.js')],
       })
       .version();

4. Finalmente guarda el archivo.

Tras esto, ya podrás usar código SCSS junto con Tailwind.

Cómo usar Tailwind en Laravel

Laravel Mix utiliza Webpack, por lo que tendrás que compilar los archivos CSS/JS cada vez que los modifiques. Podrás hacerlo mediante los siguientes comandos en función de si estás en un entorno de desarrollo o en producción:

npm run dev
npm run prod

Sin embargo, cuando trabajas localmente es recomendable usar el comando npm run watch, que traducirá las clases Tailwind a CSS al vuelo, de forma que puedas trabajar con comodidad:

npm run watch

Tras ejecutar el comando anterior vamos a ver un ejemplo sencillo en el que usaremos Tailwind. para ello edita el archivo app.blade.php y asegúrate de que se incluye el CSS compilado en la cabecera del documento:

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
  ...
</body>
</html>

Ahora ya podrás comenzar a crear diferentes elementos usando las clases de Tailwind en la sección body del documento. Por ejemplo, vamos a agregar in encabezado junto con un enlace a la documentación oficial de Tailwind:

<h1 class="text-3xl font-bold underline">
  Espero que te guste Tailwind!
</h1>
<p>
  <a href="https://tailwindcss.com/" class="underline text-blue-600 hover:text-blue-800 visited:text-purple-600">Documentación de Tailwind</a>
</p>

Tal y como ves, con Tailwind tendrás que configurar todos y cada uno de los elementos, ya que a diferencia de Bootstrap no se incluye un tema ni se usan los estilos por defecto del navegador. Sin embargo, podrás configurar los estilos base de Tailwind usando la sentencia @apply en el archivo app.css. Por ejemplo, vamos a aplicar algunas clases por defecto a los enlaces. para ello edita el archivo /resources/css/app.css y agrega este bloque al final del mismo:

@layer base {
    a {
       @apply underline text-blue-600 hover:text-blue-800 visited:text-purple-600
    }
}

Si ahora rusas el enlace que hemos agregado anteriormente sin estilos, tal que así, verás que se aplican las clases de Tailwind que hemos indicado automáticamente:

<a href="https://tailwindcss.com/">Documentación de Tailwind</a>

Esto ha sido todo.

Finalizando

Con esto ya habrás configurado Tailwind con Laravel. Si tienes dudas acerca de si es más recomendable usar Tailwind con CSS  que con Sass, en mi opinión es mejor usarlo junto con Sass, aunque en cualquier caso, la cantidad de código CSS que tendrás que escribir será ínfima cuando uses Tailwind.

---