🌐 Detecting your location…
📢 Advertisement — Configure AdSense in Appearance → Customize → AdSense Settings
Programming

Guia completo do Tailwind CSS v4 2026: novos recursos e migração

📅 May 30, 2026 ⏱ 6 min read 📂 Programming
⏱️6 min read  ·  1,117 words

Tailwind CSS v4 é uma reescrita completa que elimina o arquivo de configuração, vai all-in nas variáveis ​​​​CSS e oferece um mecanismo de construção baseado em Rust que é 100x mais rápido que o Tailwind v3. Em 2026, Tailwind v4 é a escolha padrão para CSS que prioriza o utilitário. Este guia cobre tudo o que há de novo e como migrar.

O que mudou no Tailwind v4

  • No tailwind.config.js— a configuração muda para CSS usando@theme
  • Tokens de design nativos de CSS— todos os valores expostos como propriedades personalizadas CSS
  • Novo motor óxido– construído em Rust, 100x mais rápido, configuração zero
  • CSS @importprimeiro— importação de arquivo CSS único, sem necessidade de configuração PostCSS
  • Consultas de contêiner integradas– nenhum plug-in necessário
  • Novos utilitários de transformação 3D– girar-x, girar-y, perspectiva
  • Retrabalho da paleta de cores— cores baseadas em oklch para melhor gama

Instalação

# Install
npm install tailwindcss @tailwindcss/vite

# Vite config
# vite.config.ts
import tailwindcss from '@tailwindcss/vite'

export default {
  plugins: [tailwindcss()]
}

# Your main CSS file
# app.css
@import "tailwindcss";

Configuração com @theme

Não maistailwind.config.js— configurar em CSS:

/* app.css */
@import "tailwindcss";

@theme {
  /* Custom colors */
  --color-brand: oklch(60% 0.25 250);
  --color-brand-dark: oklch(40% 0.25 250);
  --color-surface: oklch(98% 0 0);

  /* Custom fonts */
  --font-sans: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Custom spacing */
  --spacing-18: 4.5rem;
  --spacing-22: 5.5rem;

  /* Custom breakpoints */
  --breakpoint-3xl: 1920px;

  /* Custom animation */
  --animate-fade-in: fade-in 0.3s ease;
}

@keyframes fade-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* CSS variables automatically available as utilities:
   bg-brand, text-brand, border-brand-dark,
   font-sans, animate-fade-in etc. */

Design Responsivo

<!-- Mobile-first responsive grid -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
  <div class="rounded-xl bg-white p-6 shadow-sm">Card</div>
</div>

<!-- Responsive text -->
<h1 class="text-2xl md:text-4xl lg:text-6xl font-bold">
  Headline
</h1>

<!-- Show/hide at breakpoints -->
<nav class="hidden md:flex gap-6">Desktop Nav</nav>
<button class="md:hidden">Menu</button>

<!-- Arbitrary breakpoints -->
<div class="[@media(min-width:900px)]:flex">Custom breakpoint</div>

Consultas de contêiner (integradas na v4)

<!-- No plugin needed! -->
<div class="@container">
  <div class="@sm:flex @md:grid @md:grid-cols-2 gap-4">
    <!-- Layout changes based on CONTAINER size, not viewport -->
    <div>Item 1</div>
    <div>Item 2</div>
  </div>
</div>

Modo escuro

<!-- Auto dark mode (prefers-color-scheme) -->
<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-white">
  <p class="text-gray-600 dark:text-gray-300">Content</p>
</div>

/* Manual dark mode via data attribute */
@variant dark (&:where([data-theme="dark"] *));

/* Usage: <html data-theme="dark"> */

Novos utilitários na v4

<!-- 3D Transforms (new in v4) -->
<div class="perspective-500 rotate-x-12 rotate-y-12">3D Card</div>

<!-- Field sizing (auto-resize textarea) -->
<textarea class="field-sizing-content">
  Auto-resizes as you type
</textarea>

<!-- Color mix utilities -->
<div class="bg-blue-500/50">50% transparent blue</div>

<!-- CSS grid improvements -->
<div class="grid grid-cols-[auto_1fr_auto]">
  <div>Left</div>
  <div>Center (fills space)</div>
  <div>Right</div>
</div>

<!-- Starting style (entry animations) -->
<dialog class="starting:opacity-0 starting:scale-95 transition-all">
  Animates in from invisible
</dialog>

Exemplos reais de componentes

<!-- Navigation bar -->
<nav class="fixed top-0 inset-x-0 z-50 bg-white/80 backdrop-blur-md border-b border-gray-200">
  <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
    <div class="flex h-16 items-center justify-between">
      <a href="/" class="text-xl font-bold text-gray-900">TechPulse</a>
      <div class="hidden md:flex items-center gap-6">
        <a href="/blog" class="text-sm text-gray-600 hover:text-gray-900 transition-colors">Blog</a>
        <a href="/about" class="text-sm text-gray-600 hover:text-gray-900 transition-colors">About</a>
        <a href="/contact" class="rounded-full bg-blue-600 px-4 py-1.5 text-sm font-medium text-white hover:bg-blue-700 transition-colors">
          Get Started
        </a>
      </div>
    </div>
  </div>
</nav>

<!-- Card component -->
<article class="group rounded-2xl bg-white shadow-sm hover:shadow-md transition-shadow overflow-hidden">
  <div class="aspect-video overflow-hidden">
    <img src="..." alt="..." class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
  </div>
  <div class="p-6">
    <span class="text-xs font-medium text-blue-600 uppercase tracking-wide">Tutorial</span>
    <h2 class="mt-2 text-xl font-semibold text-gray-900 line-clamp-2">Article Title</h2>
    <p class="mt-2 text-gray-600 text-sm line-clamp-3">Article excerpt text goes here.</p>
    <div class="mt-4 flex items-center gap-3">
      <img src="avatar.jpg" alt="Author" class="size-8 rounded-full">
      <div>
        <p class="text-sm font-medium text-gray-900">Alice Chen</p>
        <p class="text-xs text-gray-500">May 29, 2026</p>
      </div>
    </div>
  </div>
</article>

Migrando do Tailwind v3

# Run upgrade tool
npx @tailwindcss/upgrade@next

# Changes:
# - tailwind.config.js → @theme in CSS
# - PostCSS config removed
# - @apply still works but prefer utilities
# - theme() fn → use CSS vars directly
# - Some utility names changed (e.g., shadow-sm → shadow-xs)

# Check migration guide at tailwindcss.com/docs/upgrade-guide

Tailwind v4 com React/Next.js

// components/Button.tsx
import { cva, type VariantProps } from 'class-variance-authority';
import { cn } from '@/lib/utils';

const button = cva(
  'inline-flex items-center justify-center rounded-lg font-medium transition-colors focus-visible:outline-none focus-visible:ring-2',
  {
    variants: {
      variant: {
        primary: 'bg-blue-600 text-white hover:bg-blue-700',
        secondary: 'bg-gray-100 text-gray-900 hover:bg-gray-200',
        destructive: 'bg-red-600 text-white hover:bg-red-700',
        ghost: 'hover:bg-gray-100 text-gray-700',
      },
      size: {
        sm: 'h-8 px-3 text-sm',
        md: 'h-10 px-4 text-sm',
        lg: 'h-12 px-6 text-base',
      },
    },
    defaultVariants: { variant: 'primary', size: 'md' },
  }
);

interface ButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
    VariantProps<typeof button> {}

export function Button({ className, variant, size, ...props }: ButtonProps) {
  return <button className={cn(button({ variant, size }), className)} {...props} />;
}

Tailwind CSS v4 elimina o atrito – sem arquivo de configuração, compilações mais rápidas, tokens nativos de CSS. Se você estiver na v3, execute o codemod de atualização e vá para a configuração baseada em CSS. Para novos projetos, use a v4 desde o primeiro dia com o plugin Vite para configuração zero-config.

✍️ Leave a Comment

Your email address will not be published. Required fields are marked *

🌐 Read in:🇬🇧 English🇩🇪 Deutsch🇧🇷 Português🇸🇦 العربية🇮🇳 हिन्दी🇧🇩 বাংলা✕