Instalación
Configuración de Tailwind CSS en un proyecto Laravel.
Comienza creando un nuevo proyecto Laravel si aún no tienes uno configurado. El enfoque más común es utilizar el instalador de Laravel.
laravel new my-projectcd my-projectInstala @tailwindcss/vite y sus dependencias directas a través de npm.
npm install tailwindcss @tailwindcss/viteAñade el plugin @tailwindcss/vite a tu configuración de Vite.
import { defineConfig } from 'vite'import tailwindcss from '@tailwindcss/vite'export default defineConfig({ plugins: [ tailwindcss(), // … ],})Añade un @import a ./resources/css/app.css que importe Tailwind CSS. Además, indícale a Tailwind CSS que escanee algunos directorios en busca de utilidades.
@import "tailwindcss";@source "../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php";@source "../../storage/framework/views/*.php";@source "../**/*.blade.php";@source "../**/*.js";Ejecuta tu proceso de compilación con npm run dev.
npm run devAsegúrate de que tu CSS compilado esté incluido en el <head> y luego comienza a usar las clases de utilidad de Tailwind para dar estilo a tu contenido.
<!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>