Laravel + Tailwind CSS: Guia de Integração com Vite

O Laravel é conhecido por sua elegância e produtividade no desenvolvimento back-end. Com o Tailwind CSS, é possível aplicar esses mesmos princípios ao front-end, mantendo consistência, performance e organização nos layouts das suas views Blade.

A integração entre ambos é extremamente fluida utilizando o Vite, que atua como o empacotador de assets padrão do Laravel. Na arquitetura atual do Tailwind, o processo ficou ainda mais simples devido à remoção de arquivos JavaScript de configuração adicionais.

Requisitos

Laravel 10, 11 ou superior
Node.js instalado
Ambiente configurado com npm, yarn ou pnpm

Criando um projeto Laravel

Bash

composer create-project laravel/laravel meu-projeto
cd meu-projeto

Instalando o Tailwind CSS

Para integrar a versão mais recente do Tailwind, você precisa instalar o pacote principal e o plugin oficial para o Vite:

Bash

npm install tailwindcss @tailwindcss/vite

Configurando o Vite

Abra o arquivo vite.config.js na raiz do seu projeto Laravel. Você deve registrar o plugin do Tailwind logo ao lado do plugin do Laravel. Esta integração substitui completamente a necessidade de um arquivo tailwind.config.js ou postcss.config.js:

JavaScript

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

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

Configurando o arquivo de estilos

No Laravel, as folhas de estilo ficam localizadas em resources/css. Edite o arquivo resources/css/app.css substituindo as diretivas antigas pela nova importação simplificada do framework:

CSS

@import "tailwindcss";

Nota: O plugin do Vite mapeia automaticamente todas as suas views Blade (resources/views//*.blade.php), scripts (resources/js//*.js) e componentes dentro do diretório resources para fazer a varredura das classes de forma nativa e automática.

Incluindo no layout Blade

Chame os assets compilados pelo Vite dentro da tag <head> do seu layout principal (ex: resources/views/layouts/app.blade.php):

HTML

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{{ config('app.name') }}</title>
  @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body class="bg-gray-100 text-gray-900">
  <div class="container mx-auto py-10">
    @yield('content')
  </div>
</body>
</html>

Exemplo de view com Tailwind

HTML

@extends('layouts.app')

@section('content')
  <div class="bg-white p-6 rounded shadow max-w-md mx-auto">
    <h1 class="text-2xl font-bold mb-4">Laravel + Tailwind CSS</h1>
    <p class="text-gray-600">Interface moderna com produtividade e controle total.</p>
  </div>
@endsection

Compilando os assets

Durante a etapa de desenvolvimento para rodar o servidor local com Hot Module Replacement (atualização instantânea na tela):

Bash

npm run dev

Para gerar os arquivos otimizados, minificados e prontos para produção:

Bash

npm run build

Boas práticas

Customizações centralizadas: Se precisar adicionar tokens de design (como cores ou fontes da marca), faça isso diretamente usando a diretiva @theme dentro de resources/css/app.css.
Organize parciais e componentes: Use as diretivas @include ou componentes nativos do Blade (<x-componente />) para reaproveitar estruturas de blocos HTML repetitivos com classes utilitárias.
Mantenha a lógica separada: Evite o excesso de lógica complexa nas views Blade. Foque em manter as tags estruturadas e estilizadas com as classes correspondentes.

Integração com ecossistemas (Livewire, Alpine.js, Inertia)

O Tailwind se alinha à filosofia moderna do ecossistema Laravel:

Laravel Breeze / Jetstream: Starters kits oficiais que já vêm com toda a estrutura atualizada de estilos configurada de fábrica.
Livewire & Alpine.js: Funcionam perfeitamente de forma reativa. O motor de varredura do Tailwind lê as classes diretamente dentro das diretivas do Livewire e dos estados do Alpine.
Inertia.js (Vue ou React): Caso prefira usar frameworks SPA dentro do Laravel, basta adicionar o suporte correspondente no vite.config.js. O compilador rastreará as classes utilitárias em arquivos .vue, .js, .jsx, .ts ou .tsx automaticamente.

O Tailwind encaixa-se na filosofia do Laravel de entregar código limpo, rápido e produtivo. Com uma configuração enxuta baseada inteiramente no ecossistema do Vite, você obtém uma base estável para criar aplicações de alta performance.