Tailwind CSS v4: Guia Completo da Nova Reescrita e Performance
Cansado de builds lentos e CSS complexo? Descubra Tailwind CSS v4, uma reescrita completa com builds 100x mais rápidos e configuração CSS-first revolucionária. Este guia detalha as mudanças fundamentais, como migrar projetos e dominar padrões avançados como container queries e design tokens dinâmicos.
Você já sentiu aquela frustração de esperar eternamente para o CSS compilar? Ou teve que configurar um monte de arquivos JavaScript só para personalizar algumas cores? Hoje eu quero compartilhar algo que vai mudar completamente sua experiência de desenvolvimento: Tailwind CSS v4 - uma reescrita completa que traz builds até 100x mais rápidos e uma configuração CSS-first revolucionária.
Pelo fim deste artigo, você vai entender as mudanças fundamentais do v4, como migrar seus projetos existentes, e dominar os novos padrões avançados que esta versão oferece.
O Que é Tailwind CSS v4?
Tailwind CSS v4 não é apenas uma atualização incremental - é uma reescrita completa do zero. Imagine pegar tudo que funcionava bem no v3 e otimizar cada aspecto para performance, simplicidade e recursos CSS modernos.
Por Que Isso Importa
Antes de mergulharmos na implementação, vamos entender o problema que estamos resolvendo:
<!-- ❌ Sem Tailwind v4 - problemas comuns --><!-- Builds lentos, configuracao complexa, CSS inchado --><div class="custom-card"> <h2 class="custom-title">Meu Card</h2> <p class="custom-description">Descricao aqui</p></div><!-- E lá no CSS... centenas de linhas de código personalizado --><!-- ✅ Com Tailwind v4 - solução limpa e rápida --><div class="bg-white rounded-lg shadow-lg p-6 @container"> <h2 class="text-xl font-bold @sm:text-2xl">Meu Card</h2> <p class="text-gray-600 mt-2">Descrição aqui</p></div>Por que essa transformação é valiosa:
Performance brutal: builds incrementais em microssegundos
Zero configuração: funciona out-of-the-box
CSS moderno: usa cascade layers, color-mix(), @property
Detecção automática: encontra seus templates automaticamente
Quando Você Deve Usar Tailwind v4?
Casos de uso ideais:
Projetos modernos que suportam navegadores atuais (Safari 16.4+, Chrome 111+, Firefox 128+)
Equipes ágeis que precisam de iteração rápida e builds instantâneos
Sistemas de design que requerem consistência e customização granular
Aplicações complexas onde performance de build é crítica
Quando NÃO usar Tailwind v4:
Suporte a navegadores legados (IE, versões antigas do Safari)
Projetos pequenos onde a simplicidade do CSS vanilla é suficiente
Equipes resistentes a adotar utility-first CSS
Instalação: Configurando Seu Primeiro Projeto
Vamos construir isso passo a passo. Vou mostrar como cada parte funciona e por que cada decisão importa.
Passo 1: Instalação Simplificada
Primeiro, precisamos instalar o Tailwind v4. Aqui está como fazer da forma mais eficiente:
Opção 1: Novo Projeto com Vite (Recomendado)
# Criar novo projetonpm create vite@latest meu-projeto-tailwind -- --template react-tscd meu-projeto-tailwind# Instalar Tailwind CSS v4npm install tailwindcss@next @tailwindcss/vite@nextOpção 2: Projeto Existente
# Para projetos existentesnpm install tailwindcss@next @tailwindcss/vite@nextComo configurar o Vite:
// vite.config.jsimport { defineConfig } from 'vite'import react from '@vitejs/plugin-react'import tailwindcss from '@tailwindcss/vite'export default defineConfig({ plugins: [ react(), tailwindcss(), // ← Apenas uma linha! ],})Por que essa configuração funciona tão bem:
Zero configuração: não precisa definir caminhos de conteúdo
Detecção automática: encontra todos os arquivos relevantes
Integração nativa: performance máxima com o Vite
Passo 2: Configuração CSS-First Revolucionária
Agora vem a parte mais legal - a nova configuração CSS-first:
2.1: Arquivo CSS Único
Primeiro, vamos criar o arquivo CSS base:
/* src/styles/globals.css */@import "tailwindcss";/* Configuração do tema diretamente em CSS */@layer theme { :root { /* Cores personalizadas */ --color-primary: oklch(0.7 0.15 240); --color-secondary: oklch(0.8 0.1 120); /* Espaçamentos customizados */ --spacing-xs: 0.125rem; --spacing-sm: 0.25rem; --spacing-md: 0.5rem; /* Tipografia */ --font-family-brand: 'Inter', system-ui, sans-serif; --font-size-huge: 4rem; }}/* Estilos base personalizados */@layer base { body { font-family: var(--font-family-brand); line-height: 1.6; } h1, h2, h3 { font-weight: 700; letter-spacing: -0.025em; }}Por que essa implementação é genial:
Variáveis CSS nativas: funciona com qualquer biblioteca
IntelliSense completo: autocomplete em IDEs modernos
Tipagem automática: o TypeScript entende as variáveis
2.2: Configuração Avançada de Tema
Vamos implementar um sistema de tema mais sofisticado:
/* Configuração avançada de tema */@layer theme { :root { /* Sistema de cores OKLCH (wide-gamut) */ --color-brand-50: oklch(0.98 0.01 240); --color-brand-100: oklch(0.95 0.02 240); --color-brand-500: oklch(0.7 0.15 240); --color-brand-900: oklch(0.3 0.08 240); /* Breakpoints customizados */ --breakpoint-tablet: 48rem; --breakpoint-desktop: 64rem; --breakpoint-wide: 80rem; /* Sistema de sombras avançado */ --shadow-soft: 0 2px 8px oklch(0 0 0 / 0.08); --shadow-medium: 0 4px 16px oklch(0 0 0 / 0.12); --shadow-hard: 0 8px 32px oklch(0 0 0 / 0.16); } /* Dark mode com variáveis dinâmicas */ [data-theme="dark"] { --color-brand-50: oklch(0.2 0.01 240); --color-brand-100: oklch(0.25 0.02 240); --color-brand-500: oklch(0.8 0.15 240); --color-brand-900: oklch(0.95 0.08 240); }}Diferenças importantes desta abordagem:
OKLCH vs RGB: cores mais vibrantes e consistentes
Variáveis dinâmicas: mudanças de tema sem JavaScript
Sistema modular: fácil manutenção e extensão
2.3: Utilitários Personalizados
/* Utilitários personalizados */@layer utilities { .text-balance { text-wrap: balance; } .scroll-smooth { scroll-behavior: smooth; } /* Container queries personalizadas */ .container-card { container-type: inline-size; container-name: card; } /* Gradientes avançados */ .bg-brand-gradient { background: linear-gradient( 135deg, var(--color-brand-500), var(--color-brand-700) ); }}Passo 3: Primeiro Componente com Recursos Avançados
// components/Card.jsxexport function Card({ title, description, image }) { return ( <div className="@container bg-white dark:bg-gray-900 rounded-xl shadow-soft overflow-hidden"> {/* Header com gradient */} <div className="h-48 bg-brand-gradient relative"> <img src={image} alt={title} className="w-full h-full object-cover mix-blend-overlay" /> </div> {/* Content com container queries */} <div className="p-6 @md:p-8"> <h3 className="text-xl @md:text-2xl font-bold text-gray-900 dark:text-white"> {title} </h3> <p className="mt-3 text-gray-600 dark:text-gray-300 text-balance"> {description} </p> {/* Actions responsivas */} <div className="mt-6 flex flex-col @sm:flex-row gap-3"> <button className="btn-primary flex-1 @sm:flex-initial"> Ler mais </button> <button className="btn-secondary"> Compartilhar </button> </div> </div> </div> )}Por que essa arquitetura é poderosa:
Container queries: responsividade baseada no componente
Dark mode automático: sem JavaScript adicional
Performance otimizada: CSS otimizado automaticamente
Um Exemplo Mais Complexo: Dashboard Responsivo
Vamos construir algo mais realista - um dashboard que demonstra recursos avançados do v4:
Entendendo o Problema
Antes de pular para o código, vamos entender o que estamos construindo:
// ❌ Abordagem ingênua - por que isso não funciona bemfunction Dashboard() { return ( <div className="dashboard-container"> {/* Layout fixo, sem responsividade inteligente */} <aside className="sidebar-fixed">...</aside> <main className="main-content">...</main> </div> )}// ✅ Nossa abordagem melhorada - o que vamos construirfunction Dashboard() { return ( <div className="@container min-h-screen bg-gray-50 dark:bg-gray-900"> <aside className="sidebar @lg:w-64 @container">...</aside> <main className="main @container">...</main> </div> )}Implementação Passo a Passo
Fase 1: Layout Adaptativo com Container Queries
// components/Dashboard.jsxfunction Dashboard() { return ( <div className="@container min-h-screen bg-gray-50 dark:bg-gray-900"> {/* Navigation responsiva */} <nav className="sticky top-0 z-50 bg-white/80 dark:bg-gray-900/80 backdrop-blur-md border-b border-gray-200 dark:border-gray-700"> <div className="px-4 @md:px-6 @lg:px-8"> <div className="flex items-center justify-between h-16"> <Logo /> <UserMenu /> </div> </div> </nav> {/* Layout principal */} <div className="flex"> <Sidebar /> <MainContent /> </div> </div> )}Quebrando isso:
Container queries: responsividade baseada no container pai
Backdrop blur: efeitos modernos sem JavaScript
Sticky navigation: comportamento nativo otimizado
Fase 2: Sidebar Inteligente
function Sidebar() { return ( <aside className="@container w-full @lg:w-64 @lg:flex-shrink-0"> <div className="h-full px-3 py-4 overflow-y-auto bg-white dark:bg-gray-800 @lg:border-r @lg:border-gray-200 @lg:dark:border-gray-700"> {/* Menu items com estados visuais */} <nav className="space-y-2"> {menuItems.map((item) => ( <MenuItem key={item.id} item={item} className="group flex items-center px-3 py-2 text-sm font-medium rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 data-[active]:bg-brand-500 data-[active]:text-white transition-all duration-200 ease-in-out" /> ))} </nav> {/* Status indicator */} <div className="mt-8 p-4 rounded-lg bg-gradient-to-r from-brand-500 to-brand-600"> <StatusWidget /> </div> </div> </aside> )}Fase 3: Grid de Cards Adaptativo
function MainContent() { return ( <main className="flex-1 @container"> <div className="p-4 @md:p-6 @lg:p-8"> {/* Header com stats */} <div className="mb-8"> <h1 className="text-2xl @md:text-3xl font-bold text-gray-900 dark:text-white"> Dashboard </h1> {/* Stats grid responsivo */} <div className="mt-6 grid grid-cols-1 @sm:grid-cols-2 @lg:grid-cols-4 gap-4"> {stats.map((stat) => ( <StatCard key={stat.id} stat={stat} /> ))} </div> </div> {/* Main content grid */} <div className="grid grid-cols-1 @lg:grid-cols-3 gap-6"> <div className="@lg:col-span-2"> <ChartSection /> </div> <div> <ActivityFeed /> </div> </div> </div> </main> )}Por que essa arquitetura é poderosa:
Container-based breakpoints: cada componente se adapta ao seu espaço
Sistema de grid flexível: layouts que realmente respondem
Performance otimizada: CSS mínimo, maximum cache hit
Padrão Avançado: Sistema de Design Tokens Dinâmicos
Agora vamos explorar um padrão avançado que demonstra o verdadeiro poder do v4.
O Problema com Abordagens Simples
/* ❌ Limitações da abordagem simples */.button { background: #3b82f6; /* Cor hard-coded */ color: white; padding: 0.5rem 1rem; /* Valores fixos */}Por que isso se torna problemático:
Falta de consistência: cores e espaçamentos arbitrários
Dificuldade de manutenção: mudanças requerem alterações em múltiplos lugares
Sem adaptabilidade: não responde a mudanças de tema
Construindo a Solução Avançada
Estágio 1: Design Tokens Semânticos
/* Sistema de design tokens completo */@layer theme { :root { /* Tokens primitivos */ --color-blue-50: oklch(0.97 0.013 240); --color-blue-500: oklch(0.7 0.15 240); --color-blue-900: oklch(0.35 0.08 240); /* Tokens semânticos */ --color-primary: var(--color-blue-500); --color-primary-hover: var(--color-blue-600); --color-surface: var(--color-gray-50); --color-on-surface: var(--color-gray-900); /* Sistema de espaçamento baseado em escala */ --spacing-unit: 0.25rem; /* 4px */ --spacing-1: calc(var(--spacing-unit) * 1); /* 4px */ --spacing-2: calc(var(--spacing-unit) * 2); /* 8px */ --spacing-4: calc(var(--spacing-unit) * 4); /* 16px */ /* Tipografia responsiva */ --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; /* Shadows com color-mix */ --shadow-color: color-mix(in oklch, var(--color-primary) 20%, transparent); --shadow-sm: 0 1px 2px var(--shadow-color); --shadow-md: 0 4px 6px var(--shadow-color); }}Estágio 2: Componentes com Estados Visuais
@layer components { /* Sistema de botões baseado em tokens */ .btn { /* Base styles usando tokens */ padding: var(--spacing-2) var(--spacing-4); border-radius: calc(var(--spacing-unit) * 1.5); font-size: var(--text-sm); font-weight: 500; transition: all 0.2s ease-in-out; /* Estados visuais com color-mix */ &:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); } &:active { transform: translateY(0); } /* Variantes */ &.btn-primary { background: var(--color-primary); color: white; &:hover { background: color-mix(in oklch, var(--color-primary) 90%, black); } } &.btn-secondary { background: var(--color-surface); color: var(--color-on-surface); border: 1px solid color-mix(in oklch, var(--color-on-surface) 20%, transparent); &:hover { background: color-mix(in oklch, var(--color-surface) 95%, var(--color-on-surface)); } } }}Estágio 3: Sistema de Tema Adaptativo
// hooks/useTheme.jsexport function useTheme() { const [theme, setTheme] = useState('light') useEffect(() => { document.documentElement.dataset.theme = theme }, [theme]) return { theme, setTheme }}// components/ThemeProvider.jsxexport function ThemeProvider({ children }) { const { theme } = useTheme() return ( <div data-theme={theme} className="theme-provider"> {children} </div> )}Por que essa arquitetura é poderosa:
Sistema escalável: fácil adicionar novos temas e variantes
Performance nativa: usa recursos CSS nativos para máxima velocidade
Manutenibilidade: mudanças centralizadas se propagam automaticamente
Tailwind v4 com TypeScript
Para usuários TypeScript, aqui está como tornar tudo type-safe:
Configurando Tipos
// types/theme.tsexport interface ThemeConfig { colors: { primary: string secondary: string surface: string 'on-surface': string } spacing: { xs: string sm: string md: string lg: string xl: string } typography: { fontFamily: { brand: string[] mono: string[] } fontSize: { xs: string sm: string base: string lg: string } }}// Augment do módulo CSSdeclare module 'csstype' { interface Properties { '--color-primary'?: string '--color-secondary'?: string '--spacing-unit'?: string }}Implementação com Tipagem Adequada
// components/Button.tsxinterface ButtonProps { variant: 'primary' | 'secondary' | 'outline' size: 'sm' | 'md' | 'lg' children: React.ReactNode onClick?: () => void disabled?: boolean}export function Button({ variant = 'primary', size = 'md', children, onClick, disabled = false }: ButtonProps) { const baseClasses = 'btn transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-primary/50' const variantClasses = { primary: 'btn-primary', secondary: 'btn-secondary', outline: 'btn-outline' } const sizeClasses = { sm: 'px-3 py-1.5 text-sm', md: 'px-4 py-2 text-base', lg: 'px-6 py-3 text-lg' } return ( <button className={cn( baseClasses, variantClasses[variant], sizeClasses[size], disabled && 'opacity-50 cursor-not-allowed' )} onClick={onClick} disabled={disabled} > {children} </button> )}Padrões TypeScript Avançados
// utils/classNames.tstype ClassValue = string | number | boolean | undefined | nulltype ClassArray = ClassValue[]type ClassRecord = Record<string, any>export function cn(...classes: (ClassValue | ClassArray | ClassRecord)[]): string { return classes .flat() .filter(Boolean) .join(' ')}// Typed theme hookexport function useTypedTheme(): ThemeConfig { const [config, setConfig] = useState<ThemeConfig>(defaultTheme) const updateTheme = useCallback((updates: Partial<ThemeConfig>) => { setConfig(prev => ({ ...prev, ...updates })) }, []) return { ...config, updateTheme }}Padrões Avançados e Melhores Práticas
1. Container Queries Para Componentes Verdadeiramente Responsivos
O que resolve: Responsividade baseada no tamanho do componente, não da viewport
Como funciona: Usa @container queries nativas do CSS
// components/ResponsiveCard.jsxfunction ResponsiveCard({ data }) { return ( <div className="@container bg-white rounded-lg overflow-hidden shadow-md"> <div className="grid grid-cols-1 @md:grid-cols-2 @lg:grid-cols-3"> <div className="p-4 @md:p-6"> <h3 className="text-lg @md:text-xl @lg:text-2xl font-bold"> {data.title} </h3> <p className="mt-2 text-sm @md:text-base text-gray-600"> {data.description} </p> </div> <div className="@md:col-span-1 @lg:col-span-2"> <img src={data.image} alt={data.title} className="w-full h-48 @md:h-full object-cover" /> </div> </div> </div> )}Quando usar: Componentes que precisam se adaptar ao espaço disponível, não ao tamanho da tela
2. Animações com @starting-style
O problema: Animações de entrada precisavam de JavaScript
A solução: @starting-style nativo do CSS
@layer utilities { .animate-in { animation: fade-in 0.3s ease-out; } @keyframes fade-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* Para elementos que aparecem dinamicamente */ .fade-in-starting { @starting-style { opacity: 0; transform: translateY(10px); } opacity: 1; transform: translateY(0); transition: all 0.3s ease-out; }}Benefícios: Animações suaves sem JavaScript adicional
3. Sistema de Cores com Wide-Gamut (OKLCH)
Use case: Cores mais vibrantes e consistentes
@layer theme { :root { /* OKLCH oferece cores mais consistentes */ --color-brand-primary: oklch(0.7 0.15 240); /* Azul vibrante */ --color-brand-secondary: oklch(0.8 0.12 120); /* Verde consistente */ /* Variações automáticas com color-mix */ --color-brand-primary-light: color-mix(in oklch, var(--color-brand-primary) 80%, white); --color-brand-primary-dark: color-mix(in oklch, var(--color-brand-primary) 80%, black); }}Vantagens: Cores mais vibrantes, especialmente em displays modernos
4. Layout com CSS Layers
Background: Controle preciso da especificidade de estilos
/* Definição das camadas */@layer theme, base, components, utilities;@layer theme { /* Variáveis de tema */ :root { --primary: oklch(0.7 0.15 240); }}@layer base { /* Reset e estilos base */ *, *::before, *::after { box-sizing: border-box; }}@layer components { /* Componentes reutilizáveis */ .card { background: white; border-radius: 0.5rem; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }}@layer utilities { /* Utilitários do Tailwind */ .text-primary { color: var(--primary); }}Trade-offs: Maior controle vs complexidade adicional
Armadilhas Comuns a Evitar
1. Configuração Desnecessariamente Complexa
O problema: Overengineering na configuração CSS
/* ❌ Não faça isso - configuração excessiva */@layer theme { :root { --color-red-50: #fef2f2; --color-red-100: #fee2e2; --color-red-200: #fecaca; /* ... 47 variações de vermelho */ --color-red-950: #450a0a; /* Centenas de variáveis desnecessárias */ --spacing-0-5: 0.125rem; --spacing-1-5: 0.375rem; --spacing-2-5: 0.625rem; }}/* ✅ Faça isso - configuração focada */@layer theme { :root { /* Apenas as cores que você realmente usa */ --color-primary: oklch(0.7 0.15 240); --color-secondary: oklch(0.8 0.1 120); --color-danger: oklch(0.65 0.15 15); /* Sistema de espaçamento simples */ --spacing-unit: 0.25rem; }}Por que isso importa: Configuração excessiva torna o projeto difícil de manter e entender
2. Abuso de Container Queries
Erro comum: Usar @container para tudo
Por que acontece: Empolgação com o novo recurso
// ❌ Evite este padrão - container queries desnecessáriasfunction SimpleText({ text }) { return ( <div className="@container"> <p className="text-base @sm:text-lg @md:text-xl"> {text} </p> </div> )}// ✅ Abordagem preferida - use quando realmente necessáriofunction ComplexCard({ data }) { return ( <div className="@container card-layout"> {/* Container query faz sentido aqui */} <div className="grid grid-cols-1 @lg:grid-cols-2"> <Content data={data} /> <Sidebar /> </div> </div> )}Prevenção: Use container queries apenas quando o layout do componente realmente precisa se adaptar ao seu container
3. Ignorar Suporte a Navegadores
A armadilha: Assumir que todos os usuários têm navegadores modernos
/* ❌ Problema - recursos sem fallback */.modern-only { background: color-mix(in oklch, blue 50%, red); container-type: inline-size;}/* ✅ Solução - progressive enhancement */.progressive { /* Fallback para navegadores antigos */ background: #6b46c1; /* Enhancement para navegadores modernos */ background: color-mix(in oklch, blue 50%, red);}@supports (container-type: inline-size) { .progressive { container-type: inline-size; }}Sinais de alerta: CSS que quebra completamente em navegadores mais antigos
Quando NÃO Usar Tailwind v4
Não alcance Tailwind v4 quando:
Suporte a navegadores legados: Se você precisa suportar IE ou versões muito antigas do Safari
Projetos ultra-simples: Uma landing page estática pode não justificar a complexidade
Equipes não familiarizadas: Se a equipe não tem experiência com utility-first CSS
<!-- ❌ Overkill para cenários simples --><div class="@container bg-white rounded-lg shadow-md p-4 @md:p-6 @lg:p-8"> <h1 class="text-xl @md:text-2xl @lg:text-3xl">Olá Mundo</h1></div><!-- ✅ Solução simples é melhor --><div class="simple-hello"> <h1>Olá Mundo</h1></div>Framework de decisão: Use Tailwind v4 quando você precisa de um sistema de design consistente, builds rápidos, e recursos CSS modernos
Tailwind v4 vs Alternativas
Quando Tailwind v4 Brilha
Tailwind v4 é ótimo para:
Sistemas de design complexos: Customização granular e consistência
Performance crítica: Builds ultra-rápidos e CSS otimizado
Equipes grandes: Padrões consistentes e manutenibilidade
Quando Considerar Alternativas
Considere alternativas quando você precisa:
Prototipagem rápida → Bootstrap: Componentes prontos para uso
CSS mínimo → CSS Vanilla: Para projetos muito simples
Runtime styling → Styled-components: Para styling dinâmico complexo
Matriz de Comparação
Característica | Tailwind v4 | Bootstrap | Styled-Components |
|---|---|---|---|
Performance de Build | ⭐⭐⭐⭐⭐ | ⭐⭐⭐ | ⭐⭐ |
Customização | ⭐⭐⭐⭐⭐ | ⭐⭐ | ⭐⭐⭐⭐ |
Curva de Aprendizado | ⭐⭐⭐ | ⭐⭐⭐⭐⭐ | ⭐⭐⭐ |
Tamanho Final | ⭐⭐⭐⭐⭐ | ⭐⭐⭐ | ⭐⭐⭐ |
Recursos Modernos | ⭐⭐⭐⭐⭐ | ⭐⭐ | ⭐⭐⭐⭐ |
Conclusão
Tailwind CSS v4 é uma revolução genuína no desenvolvimento de interfaces. Ele traz builds até 100x mais rápidos, configuração CSS-first intuitiva, e recursos CSS de última geração como container queries e wide-gamut colors.
Principais pontos:
Performance revolucionária: Builds incrementais em microssegundos transformam sua experiência de desenvolvimento
Configuração simplificada: CSS-first elimina a complexidade do JavaScript config
Recursos modernos: Container queries, OKLCH colors, e @starting-style abrem novas possibilidades criativas
Migração facilitada: Ferramenta automática de upgrade torna a transição indolor
Na próxima vez que você iniciar um projeto ou considerar otimizar sua stack de desenvolvimento, lembre-se do Tailwind v4. Seu futuro eu (e sua equipe) vai agradecer pela velocidade, consistência e poder que ele oferece.
Próximos passos:
Instale o Tailwind v4 em um projeto teste
Experimente o Tailwind Play para testar recursos
Leia a documentação oficial para se aprofundar
Você já experimentou Tailwind v4 nos seus projetos? Que padrões acharam mais úteis? Compartilhe suas experiências nos comentários!
Se este artigo ajudou você a dominar o Tailwind v4, siga para mais conteúdos sobre desenvolvimento moderno e melhores práticas! 🚀
Recursos
Arsenal do dev de elite.
Lazy Loading: carregar menos para entregar mais
A web nunca foi tão rápida, e nunca engoliu tantos megabytes. A saída não é acelerar a entrega, mas adiar o que não importa agora.
Você está dimensionando elementos do jeito errado. E o CSS já tem a solução há anos.
Você define width: 200px. Funciona... até virar min-width, max-width e um calc() ilegível. E se o conteúdo dissesse o tamanho ideal?
TypeScript com Zustand + TanStack Query: os tipos que os tutoriais não mostram
Aprenda a lidar com os tipos que os tutoriais ignoram e use StateCreator, generics e factories para evitar erros.