Instalar Tailwind CSS con Laravel

Configurando Tailwind CSS en un proyecto Laravel.

Crea tu proyecto

Comienza creando un nuevo proyecto Laravel si aún no tienes uno configurado. El enfoque más común es usar el instalador de Laravel.

Terminal

laravel new my-project
cd my-project

Instala Tailwind CSS

Instala @tailwindcss/vite y sus dependencias peer a través de npm.

Terminal

npm install tailwindcss @tailwindcss/vite

Configura el plugin de Vite

Añade el plugin @tailwindcss/vite a tu configuración de Vite.

vite.config.ts

import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'
export default defineConfig({
  plugins: [
    tailwindcss(),
    // …
  ],
})

Importa Tailwind CSS

Añade un @import a ./resources/css/app.css que importe Tailwind CSS. Adicionalmente, dile a Tailwind CSS que escanee tu directorio resources/views en busca de utilidades.

app.css

@import "tailwindcss";
@source "../views";

Inicia tu proceso de build

Ejecuta tu proceso de build con npm run dev.

Terminal

npm run dev

Comienza a usar Tailwind en tu proyecto

Asegúrate de que tu CSS compilado esté incluido en el <head> y luego comienza a usar las clases de utilidad de Tailwind para estilizar tu contenido.

app.blade.php

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    @vite('resources/css/app.css')
  </head>
  <body>
    <h1 class="text-3xl font-bold underline">
      Hello world!
    </h1>
  </body>
</html>

Instalar Tailwind CSS con Laravel

Usando Vite

Usando Laravel Mix

Crea tu proyecto

Instala Tailwind CSS

Configura el plugin de Vite

Importa Tailwind CSS

Inicia tu proceso de build

Comienza a usar Tailwind en tu proyecto