Cómo instalar Tailwind CSS en Laravel

En este tutorial vamos a ver cómo instalar Tailwind CSS 4 en Laravel con Vite. Crearemos una vista Blade, compilaremos sus estilos y comprobaremos que las clases de Tailwind aparecen en el navegador.

Introducción

Necesitas PHP y Composer compatibles con tu versión de Laravel, además de Node.js y npm compatibles con Vite. Compruébalos antes de empezar:

php --version
composer --version
node --version
npm --version

Si necesitas preparar Node.js en Ubuntu, consulta la guía de instalación con NVM. También conviene conocer lo básico de HTML y de la terminal.

Esta guía utiliza Tailwind 4. Los comandos npx tailwindcss init -p y las directivas @tailwind base, @tailwind components y @tailwind utilities pertenecen al flujo anterior de Tailwind 3. Si mantienes un proyecto antiguo, revisa primero la guía oficial de actualización.

Instalación de Laravel

Si ya tienes un proyecto Laravel con Vite, accede a su carpeta y continúa con el siguiente apartado. Para crear uno de ejemplo con Laravel 13, ejecuta:

composer create-project laravel/laravel nuevo-proyecto "^13.0"
cd nuevo-proyecto
npm install

Puedes consultar los requisitos de PHP y las otras opciones de instalación en la documentación de Laravel.

Instalación de Tailwind CSS en Laravel

Primero comprueba si la plantilla de Laravel ya incluye los paquetes y su configuración:

npm ls tailwindcss @tailwindcss/vite

Si ya utiliza Tailwind 4, conserva la configuración existente. En un proyecto con Vite que todavía no lo tenga, instala:

npm install -D tailwindcss@^4 @tailwindcss/vite@^4

El plugin de Vite se encargará de integrar Tailwind en la compilación. Con estos dos paquetes ya tendrás las dependencias necesarias para seguir el ejemplo.

Instalación de Tailwind en Laravel usando Vite

A continuación edita vite.config.js y agrega el plugin de Tailwind a los que ya utilice tu aplicación. Si tu proyecto utiliza TypeScript, el archivo se llamará vite.config.ts:

import { defineConfig } from 'vite'
import laravel from 'laravel-vite-plugin'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [
    laravel({
      input: ['resources/css/app.css', 'resources/js/app.js'],
      refresh: true,
    }),
    tailwindcss(),
  ],
})

Importa Tailwind desde resources/css/app.css e indica las plantillas que deben examinarse:

@import "tailwindcss";

@source "../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php";
@source "../../storage/framework/views/*.php";
@source "../**/*.blade.php";
@source "../**/*.js";

Las rutas de @source son relativas a ese archivo CSS. Si tu aplicación utiliza componentes Vue o Svelte, añade las rutas que correspondan, sin borrar las que ya estén configuradas. Este es el flujo descrito en la instalación oficial para Laravel y Vite.

Instalación de Tailwind en Laravel usando Laravel Mix

Laravel Mix pertenece a proyectos anteriores basados en Webpack. Para migrar uno de esos proyectos a Vite tendrás que adaptar sus entradas, scripts y vistas. Para un proyecto nuevo utiliza Vite; para uno existente consulta la integración de Vite en Laravel.

Si necesitas mantener temporalmente Tailwind 3 y Mix, utiliza la documentación de esa versión. Los pasos de este artículo corresponden a Tailwind 4 y Vite.

Cómo usar Sass con Tailwind en Laravel

Tailwind 4 está pensado para utilizarse directamente con CSS. Por ello, mantendremos los estilos del ejemplo en app.css. La documentación de compatibilidad explica esta limitación y las funciones CSS que reemplazan algunos usos de preprocesadores.

Configura Sass con Tailwind en Laravel usando Vite

Si una aplicación existente tiene estilos Sass, revisa su compilación por separado. La entrada de Tailwind de este ejemplo continúa siendo resources/css/app.css.

Configura Sass con Tailwind en Laravel usando Laravel Mix

Si mantienes una aplicación anterior con Mix y Sass, comprueba las versiones antes de actualizarla. Esa configuración requiere revisar conjuntamente Mix, Sass y la versión de Tailwind utilizada.

Cómo usar Tailwind en Laravel

Crea resources/views/tailwind-demo.blade.php con esta vista:

<!doctype html>
<html lang="es">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tailwind en Laravel</title>
    @vite(['resources/css/app.css', 'resources/js/app.js'])
  </head>
  <body class="grid min-h-screen place-items-center bg-slate-100 p-6">
    <main class="w-full max-w-lg rounded-2xl bg-white p-8 shadow-lg">
      <p class="mb-3 text-sm font-semibold tracking-wide text-indigo-600">
        LARAVEL + TAILWIND CSS 4
      </p>
      <h1 class="text-3xl font-bold text-slate-900">
        Tu primera vista con Tailwind
      </h1>
      <p class="mt-4 leading-relaxed text-slate-600">
        Esta tarjeta utiliza clases compiladas con Vite.
      </p>
      <a href="https://tailwindcss.com/docs"
         class="mt-6 inline-flex rounded-lg bg-indigo-600 px-5 py-3 font-semibold text-white hover:bg-indigo-700">
        Consultar la documentación
      </a>
    </main>
  </body>
</html>

En routes/web.php, conserva la importación de Route y agrega esta ruta:

Route::view('/tailwind-demo', 'tailwind-demo');

En una terminal, inicia Laravel:

php artisan serve

En otra, dentro del mismo proyecto, inicia Vite:

npm run dev

Abre http://127.0.0.1:8000/tailwind-demo, o la dirección que haya indicado Artisan. La página se sirve desde Laravel; Vite proporciona los recursos durante el desarrollo.

Para preparar los recursos de producción utiliza:

npm run build

El comando genera los archivos que Laravel carga mediante @vite. Durante el desarrollo utiliza npm run dev; para preparar los recursos que vas a publicar, utiliza npm run build. Si los estilos no aparecen, comprueba que Vite esté ejecutándose o que hayas compilado los recursos, y que el CSS figure en las entradas del plugin de Laravel.

Personaliza los estilos

Puedes definir un color propio en el mismo app.css:

@theme {
  --color-brand: #4f46e5;
}

Esto permite utilizar clases como bg-brand y text-brand. Escribe los nombres completos de las clases en las plantillas: Tailwind debe poder detectarlos al compilar. La documentación de variables de tema desarrolla esta configuración.

Para las pruebas de este artículo usa un navegador actual. Tailwind 4 depende de funciones CSS modernas; si tu aplicación debe admitir navegadores antiguos, revisa su compatibilidad antes de actualizar desde Tailwind 3.

Finalizando

Ya tienes Tailwind 4 integrado con Vite, una vista Blade y los comandos de desarrollo y producción. A partir de este ejemplo puedes crear tus propios componentes y reutilizarlos en otras vistas de Laravel.

Esto ha sido todo.