Cheat sheet do Tailwind CSS v4 (com busca)

Um cheat sheet do Tailwind CSS v4 com busca: digite qualquer classe ou palavra comum e veja o CSS exato que a v4 gera, de múltiplos de var(--spacing) a tokens de cor em OKLCH. Também cobre tokens do @theme, breakpoints, container queries, caixas flex e grid ao vivo, a paleta de cores completa, o modo escuro e as renomeações da v3 para a v4.

Atualizado em 13 de outubro de 2026

Este guia cobre o Tailwind CSS v4 (a v4.3 é a versão atual no momento em que escrevemos, outubro de 2026). Para cada classe, ele mostra o CSS que a v4 realmente gera, o que importa porque a v4 mudou a forma como os valores são produzidos: o espaçamento é um múltiplo de uma única variável --spacing, as cores são variáveis --color-* definidas em OKLCH, e tamanhos como raio, sombra e texto vêm de variáveis de tema nomeadas. Digite na caixa para filtrar. A busca funciona com nomes de classes, com o CSS que elas geram e com palavras comuns como "center", "gradient" ou "sticky".

Busque qualquer utilitário

Como ler a tabela: calc(var(--spacing) * 4) equivale a 1rem porque o --spacing padrão é 0.25rem. Mude essa única variável no @theme e todo padding, margin, gap, largura e altura que usa a escala numérica muda junto. Onde o CSS gerado é longo (gradientes, rings, transições), a tabela mostra uma versão simplificada e avisa.

Como a v4 transforma uma classe em um valor

Há quatro formas de dar um valor a um utilitário na v4, e saber qual delas você está usando explica a maioria das surpresas:

• Um número na escala de espaçamento: p-4, w-64, gap-3. Qualquer número inteiro funciona, assim como passos de um quarto como p-2.5, sem configuração. O valor é calc(var(--spacing) * n).
• Um valor de tema nomeado: rounded-lg, shadow-md, text-xl, max-w-md. Cada um lê uma variável como --radius-lg ou --container-md.
• Um valor arbitrário entre colchetes: p-[13px], grid-cols-[200px_1fr], bg-[#4f98fb]. Sublinhados substituem os espaços.
• Uma variável CSS entre parênteses: bg-(--brand) é a forma abreviada da v4 para bg-[var(--brand)]. Na v3 você escrevia bg-[--brand].

Frações como w-1/2 viram calc(1/2 * 100%), e um sufixo de opacidade como bg-black/50 vira um color-mix() com transparent, então funciona com qualquer formato de cor.

Tokens do @theme (o substituto do tailwind.config.js na v4)

Na v4 você configura o design system em CSS. Variáveis declaradas dentro de @theme viram ao mesmo tempo propriedades personalizadas CSS em :root e a fonte das classes utilitárias. O prefixo da variável decide quais utilitários ela alimenta:

@import "tailwindcss";

@theme {
  --font-display: "Satoshi", sans-serif;   /* font-display */
  --color-brand-500: oklch(65% 0.17 255);  /* bg-brand-500, text-brand-500 ... */
  --breakpoint-3xl: 120rem;                /* 3xl: variant */
  --spacing: 0.25rem;                      /* p-4 = 1rem */
  --radius-card: 0.875rem;                 /* rounded-card */
}

Namespace	Alimenta	Exemplo
--color-*	todos os utilitários de cor (bg, text, border, fill, ring, cor de shadow...)	bg-red-500
--spacing	padding, margin, gap, largura, altura, inset, translate	px-4
--font-*	família de fonte	font-sans
--text-*	tamanho de fonte (mais o opcional --text-*--line-height)	text-xl
--font-weight-*	peso de fonte	font-bold
--tracking-* / --leading-*	espaçamento entre letras / altura de linha	tracking-wide
--breakpoint-*	variantes responsivas	sm:*
--container-*	variantes de container query e max-w-*	@sm:*, max-w-md
--radius-*	raio da borda	rounded-sm
--shadow-*, --inset-shadow-*, --drop-shadow-*	sombras	shadow-md
--blur-*	blur e backdrop blur	blur-md
--ease-* / --animate-*	funções de timing / animações	ease-out, animate-spin
--perspective-* / --aspect-*	perspectiva 3D / proporção	perspective-near, aspect-video

Para descartar um namespace padrão inteiro, defina-o primeiro como initial, por exemplo --color-*: initial;, e depois declare apenas as suas cores. Se você ainda tem uma configuração em JavaScript, a v4 pode carregá-la com @config "./tailwind.config.js";, mas as opções corePlugins, safelist e separator não são suportadas.

Breakpoints

Os breakpoints são mobile first: uma classe sem prefixo vale em qualquer largura, e md:flex vale a partir de 48rem. A v4 os escreve com a sintaxe de intervalo width >= ....

Prefixo	Largura mínima	CSS	Abaixo dele (max-*)
sm:	40rem (640px)	@media (width >= 40rem)	max-sm: = @media (width < 40rem)
md:	48rem (768px)	@media (width >= 48rem)	max-md:
lg:	64rem (1024px)	@media (width >= 64rem)	max-lg:
xl:	80rem (1280px)	@media (width >= 80rem)	max-xl:
2xl:	96rem (1536px)	@media (width >= 96rem)	max-2xl:

Empilhe-os para mirar um intervalo: md:max-xl:flex vale apenas de 48rem até 80rem (sem incluir). Para um breakpoint pontual, use min-[900px]:grid ou max-[600px]:hidden. Adicione ou altere breakpoints com --breakpoint-* no @theme e mantenha todos em rem para que sejam ordenados corretamente.

Container queries

As container queries vêm embutidas na v4 (na v3 elas precisavam de um plugin). Marque um elemento pai com @container e estilize os filhos com @sm:, @md: e assim por diante. Elas reagem à largura do pai, e não à da janela, que é o que você quer para um card que aparece tanto numa barra lateral quanto numa coluna principal larga.

<div class="@container">
  <article class="flex flex-col @md:flex-row gap-4">
    <img class="w-full @md:w-48 rounded-lg" src="..." alt="">
    <div>...</div>
  </article>
</div>

Variante	Largura do container	Variante	Largura do container
@3xs	16rem (256px)	@2xl	42rem (672px)
@2xs	18rem (288px)	@3xl	48rem (768px)
@xs	20rem (320px)	@4xl	56rem (896px)
@sm	24rem (384px)	@5xl	64rem (1024px)
@md	28rem (448px)	@6xl	72rem (1152px)
@lg	32rem (512px)	@7xl	80rem (1280px)
@xl	36rem (576px)

Cada uma compila para @container (width >= ...). Use @max-md: para "abaixo de", empilhe @sm:@max-md: para um intervalo, dê nome aos containers com @container/sidebar e mire neles com @md/sidebar:, e use tamanhos arbitrários como @min-[475px]:. Observe que os tamanhos de container não são os mesmos números dos breakpoints: @md é 28rem, enquanto md: é 48rem.

Referência rápida de flex e grid

Escolha um layout abaixo e veja as caixas se moverem. A string de classes é atualizada a cada clique, então você pode copiá-la direto para o seu markup.

Os padrões que você vai usar com mais frequência:

Objetivo	Classes
Grade de cards responsiva sem breakpoints	grid grid-cols-[repeat(auto-fill,minmax(16rem,1fr))] gap-6
Barra lateral mais conteúdo	grid md:grid-cols-[16rem_1fr] gap-8
Rodapé preso no fim de uma página curta	flex min-h-dvh flex-col no wrapper, flex-1 no main
Texto que é truncado dentro de uma linha flex	min-w-0 no filho flex, truncate no texto
Empilhado no celular, em linha no desktop	flex flex-col md:flex-row gap-4
Empurrar o último item para a direita	ms-auto (ou ml-auto) nesse item

Paleta de cores padrão (OKLCH), clique para copiar

A v4 define a paleta padrão em OKLCH, que consegue exibir cores mais saturadas em telas de gama ampla. Cada amostra abaixo é pintada com o valor exato do próprio arquivo de tema do Tailwind; clique em uma para copiar o valor oklch(). Os tons vão de 50 a 950. As paletas marcadas com * (mauve, olive, mist e taupe) foram adicionadas na v4.2.0, então não existem nas versões anteriores da v4. Preto e branco são #000 e #fff.

Use-as como bg-sky-500, text-sky-500/80 ou, no seu próprio CSS, var(--color-sky-500). Para conferir se uma combinação é legível, passe-a pelo verificador de contraste de cores, e para uma escala personalizada no mesmo formato experimente o gerador de paleta de cores Tailwind.

Modo escuro na v4

Por padrão, dark: segue o sistema operacional por meio de @media (prefers-color-scheme: dark). Para controlá-lo por uma classe ou atributo (para um botão manual), sobrescreva a variante no seu CSS com @custom-variant. Não existe mais a chave de configuração darkMode.

/* Class strategy: <html class="dark"> */
@custom-variant dark (&:where(.dark, .dark *));

/* Or a data attribute: <html data-theme="dark"> */
@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));

<div class="bg-white text-slate-900 dark:bg-slate-900 dark:text-slate-100">...</div>

Com um botão manual, defina a classe antes de a página ser pintada (um pequeno script inline no <head> que lê a escolha salva) para que os visitantes não vejam um piscar do tema errado. Uma terceira opção é dispensar totalmente as classes dark:: defina tokens semânticos como --color-surface no @theme e troque os valores deles em .dark, para que uma única classe como bg-surface funcione nos dois temas.

Da v3 para a v4: classes renomeadas e alteradas

Estas vêm do guia oficial de atualização. As renomeações são as mais importantes porque os nomes antigos ainda existem e produzem silenciosamente um resultado diferente (menor).

v3	v4	Por quê
shadow-sm	shadow-xs	A escala desceu um passo para que todo tamanho tenha um nome
shadow	shadow-sm	Mesmo deslocamento
drop-shadow-sm / drop-shadow	drop-shadow-xs / drop-shadow-sm	Mesmo deslocamento
blur-sm / blur	blur-xs / blur-sm	Mesmo deslocamento (também backdrop-blur-*)
rounded-sm	rounded-xs	Mesmo deslocamento
rounded	rounded-sm	Mesmo deslocamento
outline-none	outline-hidden	Na v4, outline-none agora define de fato outline-style: none
ring (3px, blue-500)	ring-3 mais uma cor	ring sozinho agora tem 1px em currentColor
outline outline-2	outline-2	Os utilitários de largura agora definem um estilo sólido por conta própria
bg-opacity-50 (e text-, border-, ring-, divide-, placeholder-opacity)	bg-black/50	Removido; use o modificador com barra
flex-shrink-0 / flex-grow	shrink-0 / grow	Aliases removidos
overflow-ellipsis	text-ellipsis	Alias removido
decoration-slice / decoration-clone	box-decoration-slice / box-decoration-clone	Aliases removidos
bg-[--brand]	bg-(--brand)	Nova forma abreviada para variáveis CSS
!bg-red-500	bg-red-500!	O important vai no final (a forma antiga está obsoleta)
first:*:pt-0	*:first:pt-0	Variantes empilhadas agora são lidas da esquerda para a direita
tw-flex (prefixo)	tw:flex	Prefixos parecem uma variante e vêm primeiro

Mudanças de comportamento sem renomeação, que pegam muita gente durante a atualização:

• Cor de border e divide: o padrão agora é currentColor em vez de gray-200, então um border sozinho fica escuro. Adicione uma cor como border-gray-200.
• Hover em telas sensíveis ao toque: hover: fica envolvido em @media (hover: hover), então um toque não dispara mais estilos de hover que ficam presos.
• Botões: o Preflight agora dá aos botões cursor: default, como o navegador faz. Adicione cursor-pointer se quiser a mãozinha.
• space-x / space-y e divide: o seletor mudou para > :not(:last-child) e a margem passou para o lado final. Se o espaçamento parecer errado, troque para flex ou grid com gap.
• container: as opções center e padding não existem mais; estenda-o com @utility container { margin-inline: auto; padding-inline: 2rem; }.
• Gradientes: a v4 chama os gradientes lineares de bg-linear-to-r e adiciona bg-radial e bg-conic.
• Navegadores: a v4 tem como alvo Safari 16.4+, Chrome 111+ e Firefox 128+. Se você precisa dar suporte a navegadores mais antigos, o guia de atualização recomenda ficar na v3.4.

A ferramenta oficial npx @tailwindcss/upgrade cuida automaticamente da maioria das renomeações. Rode-a em um branch limpo e revise o diff, já que ela não tem como saber quais classes shadow você queria que continuassem com a mesma aparência.

Imprimindo este guia

Esta página tem estilos de impressão: as caixas de busca e os botões ficam ocultos, as tabelas encolhem para uma fonte menor e a grade de cores mantém as amostras juntas. Na maioria dos navegadores, ative "Gráficos de plano de fundo" na caixa de diálogo de impressão, ou as amostras saem em branco. Se você filtrou a tabela antes, só as linhas visíveis são impressas, o que é um jeito rápido de montar uma folha de uma página só com os utilitários que você usa.

A mesma variante print: funciona nos seus próprios projetos: print:hidden na navegação, print:text-black em textos claros e print:break-inside-avoid em cards mantêm as páginas impressas legíveis.

Relacionados

• Estados de botão em CSS: hover, focus-visible, active e disabled, em CSS puro e Tailwind.
• Esquemas de cores para sites para escolher uma paleta antes de mapeá-la para tokens.
• Gerador de CSS grid e a galeria de componentes com seções Tailwind que você pode copiar.

Perguntas frequentes

Onde fica o tailwind.config.js no Tailwind v4?

A v4 é configurada em CSS. Você importa o Tailwind com @import "tailwindcss" e declara os design tokens dentro de um bloco @theme, como --color-brand-500 ou --breakpoint-3xl. Uma configuração em JavaScript ainda pode ser carregada com a diretiva @config, mas as opções corePlugins, safelist e separator não são suportadas.

Quais são os breakpoints padrão do Tailwind v4?

sm é 40rem (640px), md é 48rem (768px), lg é 64rem (1024px), xl é 80rem (1280px) e 2xl é 96rem (1536px). Eles são mobile first, então md:flex vale a partir de 48rem. Use max-md: para estilos abaixo de um breakpoint e empilhe-os, como em md:max-xl:, para um intervalo.

Por que minhas sombras e cantos arredondados parecem menores depois de atualizar para a v4?

As escalas de shadow, radius e blur desceram um passo. O shadow-sm da v3 é o shadow-xs da v4, o shadow da v3 é o shadow-sm da v4, o rounded-sm da v3 é o rounded-xs da v4 e o rounded da v3 é o rounded-sm da v4. Os nomes antigos ainda compilam, então nada dá erro; eles só produzem o tamanho imediatamente menor.

Como faço o modo escuro usar uma classe em vez da configuração do sistema na v4?

Adicione @custom-variant dark (&:where(.dark, .dark *)); ao seu CSS. Os utilitários dark: passam a valer sempre que um ancestral tiver a classe dark. Use [data-theme=dark] no seletor se preferir um atributo data.

O Tailwind v4 precisa de um plugin para container queries?

Não. As container queries vêm embutidas. Coloque @container no elemento pai e use variantes como @sm:, @md: e @max-md: nos filhos. Os tamanhos de container começam em @3xs (16rem) e são diferentes dos breakpoints da página; por exemplo, @md é 28rem.

Para que compila p-4 no Tailwind v4?

padding: calc(var(--spacing) * 4). Com o --spacing padrão de 0.25rem, isso dá 1rem (16px no tamanho de fonte padrão). Qualquer número inteiro funciona na escala de espaçamento sem configuração, e mudar --spacing redimensiona todos de uma vez.

Display

Itens

Direção

Quebra

Eixo principal

Colunas

Eixo transversal

Gap

Copiado

Copiar classes

Imprimir este cheat sheet

Comece grátis · Sem cartão de crédito

Relacionados: Guias

• Cores do Tailwind CSS
• Tailwind vs Bootstrap
• Exemplos de página de equipe
• Termos de serviço ou política de privacidade
• Exemplos de página de agradecimento
• TOML vs YAML
• Redirecionamentos demais
• Classes em TypeScript

Produto

• Criador de sites com IA
• Instalamos nosso criador de sites IA de $2M no seu negócio
• Empresas
• Documentação da API

Para quem é

• Para agências
• Para freelancers
• Para provedores de hospedagem
• Para plataformas SaaS
• Para startups
• Serviços financeiros
• Soluções para saúde

Recursos

• Editor de arrastar e soltar
• SEO e análises
• Marca personalizada
• Painel do cliente
• Faturamento de revenda

Recursos

• Blog
• Central de Ajuda
• Ferramentas gratuitas para empresas
• Free UI Components
• Modelos
• Coleções de modelos
• Exemplos de sites
• Guias
• Comparações
• Alternativas
• Os melhores
• Avaliações
• Guias de preços
• Glossário e guias
• Integrações
• Desenvolvedores
• Benchmark
• Windows App

Empresa

• Sobre nós
• Preços
• Candidatar-se ao programa de parceiros
• Fale conosco
• Carreiras
• Segurança
• Política de privacidade
• Termos de serviço

Mapa do site