Tailwind responsivo: breakpoints e media queries no Tailwind CSS

O Tailwind CSS resolve o design responsivo com prefixos de breakpoint. Uma classe sem prefixo, como flex-col, vale em todos os tamanhos, e uma classe com prefixo, como md:flex-row, vale a partir do breakpoint md (48rem, 768 px). Isso torna o Tailwind mobile first por padrão: você escreve o layout de celular sem prefixo e acrescenta prefixos para telas maiores. Este guia trata do Tailwind v4, com observações sobre o v3 onde a sintaxe muda.

Breakpoints padrão do Tailwind CSS v4

Não existe prefixo xs: por padrão. Os estilos sem prefixo são o seu menor layout. Você pode conferir os valores na documentação de design responsivo do Tailwind.

Como os prefixos mobile first funcionam

Um grid de cards típico:

<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 lg:gap-8">
  ...
</div>

Leia da esquerda para a direita: uma coluna no celular, duas colunas a partir de 640 px, três colunas e espaçamento maior a partir de 1024 px. Um erro comum é escrever sm:grid-cols-1 esperando atingir os celulares. sm: significa “640 px para cima”, então os estilos de celular vão sem prefixo.

Para um cabeçalho que passa de coluna para linha:

<header class="flex flex-col items-start gap-3 md:flex-row md:items-center md:justify-between">

Como mirar um intervalo ou uma largura máxima

O Tailwind v4 traz variantes max-* e permite combiná-las com os prefixos de min-width:

• max-md:hidden esconde um elemento abaixo de 768 px.
• md:max-lg:flex vale só de 768 px até 1024 px (sem incluir).

Para valores pontuais, use breakpoints arbitrários: min-[900px]:grid-cols-4 ou max-[420px]:text-sm. Use com moderação; se um valor aparece em vários lugares, transforme-o num breakpoint com nome.

Como adicionar ou alterar breakpoints

No v4, breakpoints são variáveis de tema definidas no seu CSS:

@import "tailwindcss";

@theme {
  --breakpoint-xs: 30rem;
  --breakpoint-3xl: 120rem;
}

Isso cria os prefixos xs: e 3xl:. Para alterar um existente, redefina-o (--breakpoint-md: 50rem;). Para remover um padrão, defina-o como initial.

No Tailwind v3, a mesma configuração fica em tailwind.config.js, em theme.screens (ou theme.extend.screens para manter os padrões).

Use valores em rem para que os breakpoints respeitem quem muda o tamanho padrão da fonte no navegador. Como escolher as larguras em si está em breakpoints responsivos.

Media queries no seu próprio CSS

Às vezes é mais fácil estilizar um componente no CSS. No v4, dá para reaproveitar os breakpoints do Tailwind ali:

.prose-table {
  overflow-x: auto;

  @variant md {
    overflow-x: visible;
  }
}

@variant aceita os mesmos nomes de variante usados nas classes, então @variant lg ou @variant dark funcionam do mesmo jeito. Para a sintaxe geral de media queries, veja o guia de media queries CSS.

Outras variantes responsivas que vale conhecer

• portrait: e landscape: para orientação.
• dark: para modo escuro (baseado em prefers-color-scheme, a não ser que você configure uma estratégia por classe).
• motion-reduce: e motion-safe: para a preferência de movimento reduzido.
• print: para estilos de impressão.
• hover: no v4 só vale em aparelhos que suportam hover, então os efeitos de hover não ficam mais “presos” depois de um toque em telas touch.

Container queries no Tailwind

Breakpoints respondem à viewport. Container queries respondem à largura de um elemento pai, o que serve bem para componentes reutilizáveis que aparecem tanto em colunas largas quanto estreitas. No v4 elas são nativas:

<div class="@container">
  <article class="flex flex-col @md:flex-row">...</article>
</div>

Aqui @md: se refere à largura do contêiner (28rem por padrão), não à da tela. No v3 é preciso o plugin oficial @tailwindcss/container-queries.

Como testar um layout Tailwind no celular

O Tailwind facilita adicionar breakpoints e, na mesma medida, esquecer de conferi-los. Enquanto trabalha:

1. Deixe uma visualização no tamanho de celular aberta ao lado do editor. O modo dispositivo do Chrome DevTools funciona, assim como o Mobile View Extension, que liga com um clique, roda em localhost e mantém a moldura do celular enquanto você passa de uma página para outra.
2. No DevTools, ative Show media queries na barra de dispositivos para ver os breakpoints do Tailwind como barras e pular para cada um.
3. Teste cada breakpoint na largura exata e 1 px abaixo, por exemplo 767 px e 768 px.

O método completo está em como testar a responsividade de um site.

Perguntas frequentes

Quais são os breakpoints do Tailwind CSS?

Por padrão: sm 40rem (640 px), md 48rem (768 px), lg 64rem (1024 px), xl 80rem (1280 px) e 2xl 96rem (1536 px). Cada um vale a partir dessa largura.

Como aplicar estilos só no mobile com Tailwind?

Escreva os estilos de celular sem prefixo e sobrescreva-os nos tamanhos maiores. Se precisar de um estilo só abaixo de um tamanho, use uma variante max-*, como max-sm: ou max-md:.

As media queries do Tailwind são min-width ou max-width?

Min-width. Cada prefixo de breakpoint padrão vale daquela largura para cima, que é a abordagem mobile first.