Tailwind Utilities

Q: O que o utilitário size-12 faz?

Ele define width e height para 3rem - um atalho para w-12 h-12.

Q: Como aplicar 50% de opacidade a uma cor de fundo?

Use a sintaxe de barra: bg-blue-500/50. O número após / é a porcentagem de opacidade.

Q: Qual é o padrão group / group-hover: usado para?

Adicione group a um elemento pai Use group-hover:* em filhos para estilizá-los quando o pai estiver em hover Útil para efeitos de hover em cards onde múltiplos filhos mudam ao mesmo tempo

Q: Por que usar focus-visible: em vez de focus:?

focus-visible: só dispara com foco de teclado, não com cliques do mouse. Isso evita anéis de foco indesejados após clicar em um botão.

Q: Como escrever um valor arbitrário para um utilitário que o Tailwind não inclui?

Use a sintaxe de colchetes: w-[347px], bg-[#1da1f2], grid-cols-[200px_1fr].

Q: Armadilha: Você escreveu p-4 p-2 esperando que p-2 vencesse. Por que pode não ter vencido?

A ordem das classes na string className não determina a especificidade do CSS. Ambas têm especificidade igual, então a ordem de origem do CSS decide. Use twMerge("p-4 p-2") para resolver confiavelmente para p-2.

Q: Armadilha: truncate está em um elemento, mas o texto não está sendo truncado. Por quê?

truncate requer que o elemento ou um pai tenha uma restrição de width ou max-width definida. Sem uma, não há nada contra o qual truncar.

Q: Por que adicionar min-w-0 a filhos flex?

Filhos flex têm min-width: auto por padrão, o que os impede de encolher abaixo do tamanho de seu conteúdo. min-w-0 permite o encolhimento adequado e evita overflow.

Q: Para que servem text-balance e text-pretty no v4?

text-balance - equilibra os comprimentos das linhas em títulos para que nenhuma linha seja muito mais curta que outra text-pretty - evita palavras órfãs no final de parágrafos

Core utilities cheatsheet - the most-used classes and what changed in v4.

Receita

Receita de referência rápida - pronta para copiar e colar.

// Layout
<div className="flex items-center justify-between gap-4">
<div className="grid grid-cols-3 gap-6">
<div className="absolute top-0 right-0">
<div className="sticky top-4">
 
// Dimensionamento
<div className="h-screen w-full max-w-lg min-h-0">
<div className="size-12">  {/* width E height */}
 
// Espaçamento
<div className="p-4 px-6 py-2 pt-8">
<div className="m-auto mx-4 my-2 mt-0">
<div className="space-y-4">  {/* gap entre filhos */}
 
// Tipografia
<p className="text-sm font-medium leading-tight tracking-wide">
<p className="text-gray-600 text-balance truncate">
<p className="line-clamp-3 antialiased">
 
// Cores
<div className="bg-blue-500 text-white border-gray-200">
<div className="bg-blue-500/50">  {/* opacidade de 50% */}
 
// Bordas e Raio
<div className="rounded-lg border border-gray-200 shadow-md">
<div className="ring-2 ring-blue-500 ring-offset-2">
<div className="divide-y divide-gray-100">
 
// Interatividade
<button className="cursor-pointer hover:bg-blue-600 focus:outline-none focus-visible:ring-2">
<div className="pointer-events-none select-none">

Quando usar isto: Toda vez que você escreve um componente. Estes cobrem 90% das necessidades de estilização.

Exemplo de Trabalho

export function ProductCard({
  name,
  price,
  image,
  badge,
}: {
  name: string;
  price: number;
  image: string;
  badge?: string;
}) {
  return (
    <article className="group relative overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm transition-shadow hover:shadow-lg">
      {/* Imagem */}
      <div className="aspect-square overflow-hidden">
        <img
          src={image}
          alt={name}
          className="size-full object-cover transition-transform duration-300 group-hover:scale-105"
        />
      </div>
 
      {/* Selo */}
      {badge && (
        <span className="absolute top-3 left-3 rounded-full bg-blue-500 px-2.5 py-0.5 text-xs font-semibold text-white">
          {badge}
        </span>
      )}
 
      {/* Conteúdo */}
      <div className="space-y-1.5 p-4">
        <h3 className="truncate text-sm font-medium text-gray-900">{name}</h3>
        <p className="text-lg font-bold text-gray-900">
          ${price.toFixed(2)}
        </p>
        <button className="mt-2 w-full rounded-lg bg-gray-900 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500 active:scale-[0.98]">
          Add to Cart
        </button>
      </div>
    </article>
  );
}

O que isto demonstra:

group + group-hover:* para efeitos de hover pai-filho
aspect-square para manter a proporção da imagem
size-full (atalho para w-full h-full)
transition-* para efeitos de hover suaves
focus-visible: para anéis de foco apenas por teclado
active:scale-[0.98] para feedback de pressionamento
truncate para overflow de texto

Mergulho Profundo

Como Funciona

O Tailwind escaneia seus arquivos de origem em busca de nomes de classes e gera apenas o CSS que você usa
Cada utilitário mapeia para uma ou algumas propriedades CSS (ex: p-4 = padding: 1rem)
Valores arbitrários usam a sintaxe de colchetes: w-[347px], bg-[#1da1f2], grid-cols-[200px_1fr]
Modificadores se encadeiam da esquerda para a direita: dark:hover:bg-blue-600 = modo escuro + hover
v4 usa a pilha CSS moderna - @layer, @property, aninhamento nativo

Variações

Novo no v4 - principais mudanças:

/* 1. inset-shadow e inset-ring (substitui hacks de box-shadow) */
.card { @apply inset-shadow-sm inset-ring inset-ring-gray-200; }
 
/* 2. Opacidade de cor usa sintaxe de barra (igual ao v3) */
.overlay { @apply bg-black/50; }
 
/* 3. variante not-* */
.item { @apply not-last:border-b; }
 
/* 4. variante in-* para estado do pai */
.child { @apply in-[.open]:block; }
 
/* 5. Novos utilitários size-* */
.avatar { @apply size-10; /* = w-10 h-10 */ }
 
/* 6. text-balance e text-pretty */
.heading { @apply text-balance; }
.paragraph { @apply text-pretty; }

Padrões Flexbox:

// Conteúdo centralizado
<div className="flex min-h-screen items-center justify-center">
 
// Layout de barra lateral
<div className="flex">
  <aside className="w-64 shrink-0" />
  <main className="min-w-0 flex-1" />
</div>
 
// Espaço entre com quebra
<div className="flex flex-wrap items-center justify-between gap-4">
 
// Pilha com push de margem automática
<nav className="flex flex-col">
  <a>Home</a>
  <a>About</a>
  <a className="mt-auto">Settings</a>  {/* empurrado para baixo */}
</nav>

Padrões Grid:

// Grid responsivo auto-preenchimento
<div className="grid grid-cols-[repeat(auto-fill,minmax(250px,1fr))] gap-4">
 
// Áreas nomeadas
<div className="grid grid-cols-[250px_1fr] grid-rows-[auto_1fr_auto] [grid-template-areas:'sidebar_header''sidebar_main''sidebar_footer']">
 
// Subgrid (v4)
<div className="grid grid-cols-subgrid col-span-3">

Notas TypeScript

// Composição de utilitários type-safe com cva ou clsx
import { clsx } from "clsx";
import { twMerge } from "tailwind-merge";
 
function cn(...inputs: (string | undefined | false | null)[]) {
  return twMerge(clsx(inputs));
}
 
// Uso
<div className={cn(
  "rounded border p-4",
  isActive && "border-blue-500 bg-blue-50",
  disabled && "opacity-50 pointer-events-none",
)} />

Armadilhas

A ordem das classes não determina a especificidade - p-4 p-2 não garante que p-2 vença. Ambas têm especificidade igual; a ordem de origem do CSS decide. Correção: Use tailwind-merge para resolver conflitos: twMerge("p-4 p-2") retorna "p-2".
Valores arbitrários precisam de dicas de tipo corretas - bg-[--brand] é ambíguo. Correção: Use bg-[color:--brand] para dizer ao Tailwind que é um valor de cor.
min-w-0 em filhos flex - Filhos flex têm min-width: auto por padrão, causando overflow. Correção: Adicione min-w-0 a filhos flex que devem encolher.
truncate precisa de uma restrição de largura - truncate sem uma largura pai não faz nada. Correção: Certifique-se de que o elemento ou um pai tenha uma largura ou max-width definida.
space-y-* com filhos renderizados condicionalmente - Filhos ocultos ainda recebem margens. Correção: Use gap-* com flex/grid em vez disso.

Alternativas

Alternativa	Use Quando	Não Use Quando
Estilos inline	Valores dinâmicos únicos (ex: `style={{ width: computed }}`)	Você tem padrões estáticos e repetitivos
CSS Modules	Você precisa de CSS com escopo para uma biblioteca de componentes	Você prefere o fluxo de trabalho utility-first
Styled Components	Você quer CSS-in-JS com temas dinâmicos	Você quer CSS sem runtime
Panda CSS	Você quer tokens utilitários type-safe com zero runtime	Você prefere a DX baseada em classes do Tailwind

FAQs

O que o utilitário `size-12` faz?

Ele define width e height para 3rem - um atalho para w-12 h-12.

Como aplicar 50% de opacidade a uma cor de fundo?

Use a sintaxe de barra: bg-blue-500/50. O número após / é a porcentagem de opacidade.

Qual é o padrão `group` / `group-hover:` usado para?

Adicione group a um elemento pai
Use group-hover:* em filhos para estilizá-los quando o pai estiver em hover
Útil para efeitos de hover em cards onde múltiplos filhos mudam ao mesmo tempo

Por que usar `focus-visible:` em vez de `focus:`?

focus-visible: só dispara com foco de teclado, não com cliques do mouse. Isso evita anéis de foco indesejados após clicar em um botão.

Como escrever um valor arbitrário para um utilitário que o Tailwind não inclui?

Use a sintaxe de colchetes: w-[347px], bg-[#1da1f2], grid-cols-[200px_1fr].

Armadilha: Você escreveu `p-4 p-2` esperando que `p-2` vencesse. Por que pode não ter vencido?

A ordem das classes na string className não determina a especificidade do CSS. Ambas têm especificidade igual, então a ordem de origem do CSS decide. Use twMerge("p-4 p-2") para resolver confiavelmente para p-2.

Armadilha: `truncate` está em um elemento, mas o texto não está sendo truncado. Por quê?

truncate requer que o elemento ou um pai tenha uma restrição de width ou max-width definida. Sem uma, não há nada contra o qual truncar.

Por que adicionar `min-w-0` a filhos flex?

Filhos flex têm min-width: auto por padrão, o que os impede de encolher abaixo do tamanho de seu conteúdo. min-w-0 permite o encolhimento adequado e evita overflow.

O que é o utilitário `cn()` e como ele é tipado em TypeScript?

import { clsx } from "clsx";
import { twMerge } from "tailwind-merge";
 
function cn(...inputs: (string | undefined | false | null)[]) {
  return twMerge(clsx(inputs));
}

Ele mescla nomes de classes condicionais e resolve conflitos do Tailwind.

Para que servem `text-balance` e `text-pretty` no v4?

text-balance - equilibra os comprimentos das linhas em títulos para que nenhuma linha seja muito mais curta que outra
text-pretty - evita palavras órfãs no final de parágrafos

Como funciona o encadeamento de modificadores (ex: `dark:hover:bg-blue-600`)?

Modificadores se encadeiam da esquerda para a direita. dark:hover:bg-blue-600 significa "no modo escuro, ao passar o mouse, aplique bg-blue-600."

Qual padrão TypeScript garante a composição segura de classes condicionais?

<div className={cn(
  "rounded border p-4",
  isActive && "border-blue-500 bg-blue-50",
  disabled && "opacity-50 pointer-events-none",
)} />

Valores falsos são filtrados por clsx antes que twMerge resolva os conflitos.

Relacionado

Configuração - instalação e configuração do v4
Responsivo - pontos de interrupção e consultas de contêiner
Modo Escuro - utilitários de modo escuro
Utilitários Personalizados - criação de seus próprios utilitários

Receita

Receita de referência rápida - pronta para copiar e colar.

// Layout
<div className="flex items-center justify-between gap-4">
<div className="grid grid-cols-3 gap-6">
<div className="absolute top-0 right-0">
<div className="sticky top-4">
 
// Dimensionamento
<div className="h-screen w-full max-w-lg min-h-0">
<div className="size-12">  {/* width E height */}
 
// Espaçamento
<div className="p-4 px-6 py-2 pt-8">
<div className="m-auto mx-4 my-2 mt-0">
<div className="space-y-4">  {/* gap entre filhos */}
 
// Tipografia
<p className="text-sm font-medium leading-tight tracking-wide">
<p className="text-gray-600 text-balance truncate">
<p className="line-clamp-3 antialiased">
 
// Cores
<div className="bg-blue-500 text-white border-gray-200">
<div className="bg-blue-500/50">  {/* opacidade de 50% */}
 
// Bordas e Raio
<div className="rounded-lg border border-gray-200 shadow-md">
<div className="ring-2 ring-blue-500 ring-offset-2">
<div className="divide-y divide-gray-100">
 
// Interatividade
<button className="cursor-pointer hover:bg-blue-600 focus:outline-none focus-visible:ring-2">
<div className="pointer-events-none select-none">

Quando usar isto: Toda vez que você escreve um componente. Estes cobrem 90% das necessidades de estilização.

Exemplo de Trabalho

export function ProductCard({
  name,
  price,
  image,
  badge,
}: {
  name: string;
  price: number;
  image: string;
  badge?: string;
}) {
  return (
    <article className="group relative overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm transition-shadow hover:shadow-lg">
      {/* Imagem */}
      <div className="aspect-square overflow-hidden">
        <img
          src={image}
          alt={name}
          className="size-full object-cover transition-transform duration-300 group-hover:scale-105"
        />
      </div>
 
      {/* Selo */}
      {badge && (
        <span className="absolute top-3 left-3 rounded-full bg-blue-500 px-2.5 py-0.5 text-xs font-semibold text-white">
          {badge}
        </span>
      )}
 
      {/* Conteúdo */}
      <div className="space-y-1.5 p-4">
        <h3 className="truncate text-sm font-medium text-gray-900">{name}</h3>
        <p className="text-lg font-bold text-gray-900">
          ${price.toFixed(2)}
        </p>
        <button className="mt-2 w-full rounded-lg bg-gray-900 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500 active:scale-[0.98]">
          Add to Cart
        </button>
      </div>
    </article>
  );
}

O que isto demonstra:

group + group-hover:* para efeitos de hover pai-filho
aspect-square para manter a proporção da imagem
size-full (atalho para w-full h-full)
transition-* para efeitos de hover suaves
focus-visible: para anéis de foco apenas por teclado
active:scale-[0.98] para feedback de pressionamento
truncate para overflow de texto

Mergulho Profundo

Como Funciona

O Tailwind escaneia seus arquivos de origem em busca de nomes de classes e gera apenas o CSS que você usa
Cada utilitário mapeia para uma ou algumas propriedades CSS (ex: p-4 = padding: 1rem)
Valores arbitrários usam a sintaxe de colchetes: w-[347px], bg-[#1da1f2], grid-cols-[200px_1fr]
Modificadores se encadeiam da esquerda para a direita: dark:hover:bg-blue-600 = modo escuro + hover
v4 usa a pilha CSS moderna - @layer, @property, aninhamento nativo

Variações

Novo no v4 - principais mudanças:

/* 1. inset-shadow e inset-ring (substitui hacks de box-shadow) */
.card { @apply inset-shadow-sm inset-ring inset-ring-gray-200; }
 
/* 2. Opacidade de cor usa sintaxe de barra (igual ao v3) */
.overlay { @apply bg-black/50; }
 
/* 3. variante not-* */
.item { @apply not-last:border-b; }
 
/* 4. variante in-* para estado do pai */
.child { @apply in-[.open]:block; }
 
/* 5. Novos utilitários size-* */
.avatar { @apply size-10; /* = w-10 h-10 */ }
 
/* 6. text-balance e text-pretty */
.heading { @apply text-balance; }
.paragraph { @apply text-pretty; }

Padrões Flexbox:

// Conteúdo centralizado
<div className="flex min-h-screen items-center justify-center">
 
// Layout de barra lateral
<div className="flex">
  <aside className="w-64 shrink-0" />
  <main className="min-w-0 flex-1" />
</div>
 
// Espaço entre com quebra
<div className="flex flex-wrap items-center justify-between gap-4">
 
// Pilha com push de margem automática
<nav className="flex flex-col">
  <a>Home</a>
  <a>About</a>
  <a className="mt-auto">Settings</a>  {/* empurrado para baixo */}
</nav>

Padrões Grid:

// Grid responsivo auto-preenchimento
<div className="grid grid-cols-[repeat(auto-fill,minmax(250px,1fr))] gap-4">
 
// Áreas nomeadas
<div className="grid grid-cols-[250px_1fr] grid-rows-[auto_1fr_auto] [grid-template-areas:'sidebar_header''sidebar_main''sidebar_footer']">
 
// Subgrid (v4)
<div className="grid grid-cols-subgrid col-span-3">

Notas TypeScript

// Composição de utilitários type-safe com cva ou clsx
import { clsx } from "clsx";
import { twMerge } from "tailwind-merge";
 
function cn(...inputs: (string | undefined | false | null)[]) {
  return twMerge(clsx(inputs));
}
 
// Uso
<div className={cn(
  "rounded border p-4",
  isActive && "border-blue-500 bg-blue-50",
  disabled && "opacity-50 pointer-events-none",
)} />

Armadilhas

A ordem das classes não determina a especificidade - p-4 p-2 não garante que p-2 vença. Ambas têm especificidade igual; a ordem de origem do CSS decide. Correção: Use tailwind-merge para resolver conflitos: twMerge("p-4 p-2") retorna "p-2".
Valores arbitrários precisam de dicas de tipo corretas - bg-[--brand] é ambíguo. Correção: Use bg-[color:--brand] para dizer ao Tailwind que é um valor de cor.
min-w-0 em filhos flex - Filhos flex têm min-width: auto por padrão, causando overflow. Correção: Adicione min-w-0 a filhos flex que devem encolher.
truncate precisa de uma restrição de largura - truncate sem uma largura pai não faz nada. Correção: Certifique-se de que o elemento ou um pai tenha uma largura ou max-width definida.
space-y-* com filhos renderizados condicionalmente - Filhos ocultos ainda recebem margens. Correção: Use gap-* com flex/grid em vez disso.

Alternativas

Alternativa	Use Quando	Não Use Quando
Estilos inline	Valores dinâmicos únicos (ex: `style={{ width: computed }}`)	Você tem padrões estáticos e repetitivos
CSS Modules	Você precisa de CSS com escopo para uma biblioteca de componentes	Você prefere o fluxo de trabalho utility-first
Styled Components	Você quer CSS-in-JS com temas dinâmicos	Você quer CSS sem runtime
Panda CSS	Você quer tokens utilitários type-safe com zero runtime	Você prefere a DX baseada em classes do Tailwind

FAQs

O que o utilitário `size-12` faz?

Ele define width e height para 3rem - um atalho para w-12 h-12.

Como aplicar 50% de opacidade a uma cor de fundo?

Use a sintaxe de barra: bg-blue-500/50. O número após / é a porcentagem de opacidade.

Qual é o padrão `group` / `group-hover:` usado para?

Adicione group a um elemento pai
Use group-hover:* em filhos para estilizá-los quando o pai estiver em hover
Útil para efeitos de hover em cards onde múltiplos filhos mudam ao mesmo tempo

Por que usar `focus-visible:` em vez de `focus:`?

focus-visible: só dispara com foco de teclado, não com cliques do mouse. Isso evita anéis de foco indesejados após clicar em um botão.

Como escrever um valor arbitrário para um utilitário que o Tailwind não inclui?

Use a sintaxe de colchetes: w-[347px], bg-[#1da1f2], grid-cols-[200px_1fr].

Armadilha: Você escreveu `p-4 p-2` esperando que `p-2` vencesse. Por que pode não ter vencido?

Armadilha: `truncate` está em um elemento, mas o texto não está sendo truncado. Por quê?

truncate requer que o elemento ou um pai tenha uma restrição de width ou max-width definida. Sem uma, não há nada contra o qual truncar.

Por que adicionar `min-w-0` a filhos flex?

Filhos flex têm min-width: auto por padrão, o que os impede de encolher abaixo do tamanho de seu conteúdo. min-w-0 permite o encolhimento adequado e evita overflow.

O que é o utilitário `cn()` e como ele é tipado em TypeScript?

import { clsx } from "clsx";
import { twMerge } from "tailwind-merge";
 
function cn(...inputs: (string | undefined | false | null)[]) {
  return twMerge(clsx(inputs));
}

Ele mescla nomes de classes condicionais e resolve conflitos do Tailwind.

Para que servem `text-balance` e `text-pretty` no v4?

text-balance - equilibra os comprimentos das linhas em títulos para que nenhuma linha seja muito mais curta que outra
text-pretty - evita palavras órfãs no final de parágrafos

Como funciona o encadeamento de modificadores (ex: `dark:hover:bg-blue-600`)?

Modificadores se encadeiam da esquerda para a direita. dark:hover:bg-blue-600 significa "no modo escuro, ao passar o mouse, aplique bg-blue-600."

Qual padrão TypeScript garante a composição segura de classes condicionais?

<div className={cn(
  "rounded border p-4",
  isActive && "border-blue-500 bg-blue-50",
  disabled && "opacity-50 pointer-events-none",
)} />

Valores falsos são filtrados por clsx antes que twMerge resolva os conflitos.

Relacionado

Configuração - instalação e configuração do v4
Responsivo - pontos de interrupção e consultas de contêiner
Modo Escuro - utilitários de modo escuro
Utilitários Personalizados - criação de seus próprios utilitários

Tailwind Utilities

Buscar na documentação

Tailwind Utilities