Integração do Tailwind CSS com Laravel

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 views.

A integração entre ambos é fluida, especialmente com a utilização do Vite, que já vem como padrão nas versões mais recentes do Laravel.

Requisitos

Laravel 9 ou superior
Node.js instalado
Ambiente configurado com npm ou yarn

Criando um projeto Laravel

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

Instalando Tailwind CSS

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

Configurando o Tailwind

Edite tailwind.config.js:

module.exports = {
  content: [
    "./resources/**/*.blade.php",
    "./resources/**/*.js",
    "./resources/**/*.vue"
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Criando o arquivo de estilos

No Laravel, os arquivos de front-end ficam por padrão em resources/css.

Crie ou edite resources/css/app.css:

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

Configurando o Vite

Abra o arquivo vite.config.js e confirme que está assim:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

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

Incluindo no layout Blade

No seu layout principal resources/views/layouts/app.blade.php:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <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

@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 o desenvolvimento:

npm run dev

Para produção:

npm run build

Boas práticas

Use @apply no resources/css/components.css para criar classes reutilizáveis
Organize partials e components no Blade com nomes claros
Evite excesso de lógica no Blade – foque apenas em markup + classes Tailwind

Tailwind com Blade + Vue

Se você usa Vue no Laravel, o Vite já permite incluir .vue no input. Instale o Vue:

npm install vue

E siga com a integração normal com <template> + Tailwind nos componentes.

Frameworks auxiliares

Laravel Breeze / Jetstream: já oferecem suporte a Tailwind
Laravel Livewire: funciona muito bem com Tailwind no frontend
Alpine.js: para interatividade simples com pouco JavaScript

O Tailwind se encaixa perfeitamente na filosofia do Laravel: código limpo, rápido e produtivo. Com poucos passos, você tem uma base moderna para criar aplicações completas com visual profissional.