Responsividade e variantes

Toda classe do Tailwind pode ganhar um prefixo antes de : que muda quando ela se aplica. Isso cobre dois casos completamente diferentes com a mesma sintaxe: estado (o mouse está em cima? o campo está focado?) e tamanho de tela (a viewport é grande o suficiente?).

Variantes de estado

<button class="bg-blue-600 hover:bg-blue-700 focus:ring-2 focus:ring-blue-400 disabled:opacity-50">
  Enviar
</button>

hover:, focus:, active:, disabled: — o Tailwind já conhece os principais estados de pseudo-classe do CSS.

Breakpoints — mobile-first

Tailwind é mobile-first: uma classe sem prefixo de tamanho vale pra qualquer tela; um prefixo como md: só entra a partir daquele breakpoint pra cima.

<!-- 1 coluna no celular, 2 no tablet (md+), 4 no desktop (lg+) -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">

Os breakpoints padrão são sm (640px), md (768px), lg (1024px), xl (1280px). Redimensione a janela do preview abaixo pra ver o grid mudar de coluna sozinho.

Combinando os dois

Dá pra empilhar prefixos: md:hover:bg-blue-700 só aplica o hover a partir do breakpoint md. E também existe dark:, pro modo escuro — é assim que o próprio HTD troca de cor conforme o tema.