Tailwind CSS v4 — CSS-first configuration, sem tailwind.config.js. Usado com Vite plugin.
[!CAUTION] Tailwind v4 NÃO usa
tailwind.config.js. Toda configuração é feita em CSS com@theme. NÃO use@tailwind base/components/utilities. Use@import "tailwindcss".
bun add tailwindcss @tailwindcss/vite
vite.config.tsimport { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'
export default defineConfig({
plugins: [
react(),
tailwindcss(),
],
})
index.css@import "tailwindcss";
@theme {
/* Fontes */
--font-sans: "Inter", sans-serif;
--font-display: "Space Grotesk", sans-serif;
/* Cores customizadas */
--color-primary: #111827;
--color-accent: #2563eb;
--color-danger: #dc2626;
--color-warning: #d97706;
--color-purple: #7c3aed;
/* Superfícies */
--color-surface-50: #f8fafc;
--color-surface-100: #f1f5f9;
--color-surface-200: #e2e8f0;
}
Tudo que antes ia no tailwind.config.js agora vai no CSS:
@theme {
--color-brand-500: oklch(0.84 0.18 117.33);
--color-brand-600: oklch(0.53 0.12 118.34);
}
Uso: bg-brand-500, text-brand-600
@theme {
--font-display: "Space Grotesk", sans-serif;
}
Uso: font-display
@theme {
--breakpoint-3xl: 1920px;
}
@theme {
--animate-fade-in: fade-in 0.3s ease-out;
}
@keyframes fade-in {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
Tailwind v4 detecta automaticamente os arquivos de template. Não é necessário configurar content. Ele usa .gitignore para excluir pastas.
Para incluir fontes externas:
@source "../node_modules/@my-company/ui-lib";
/* Valores dinâmicos */
w-[350px] /* largura arbitrária */
p-[14px] /* padding arbitrário */
text-[15px] /* font-size arbitrário */
/* Container queries */
@container /* container variant */
/* color-mix (opacidade de qualquer cor) */
bg-blue-500/50 /* azul com 50% opacidade */
@tailwindcss/vite), NÃO PostCSStailwind.config.js — tudo no CSS com @theme@tailwind directives — apenas @import "tailwindcss".leaflet-container, clusters) — Tailwind não controla essesindex.css com @theme