Faça a primeira utility virar CSS no build da versão 4

Tailwind começa a fazer sentido quando você vê a passagem completa: nome no HTML, compilador e regra no CSS. Nesta aula, você não vai decorar uma tabela de classes. Vai construir um botão de consulta e provar onde cada decisão terminou.

Pense numa oficina que recebe uma lista de peças. O HTML entrega nomes como bg-cyan-600 e p-4; o compilador separa apenas as peças pedidas; o navegador monta a aparência com o CSS final. A analogia para aí: o scanner não entende a intenção do programa nem executa JavaScript. Ele procura nomes completos como texto.

O fluxo mínimo da versão 4 começa com um import CSS:

@import "tailwindcss";

Instale tailwindcss e o CLI oficial, crie um HTML com o botão e rode a compilação. Não crie tailwind.config.js só porque um tutorial da versão 3 mandou. O ponto de partida atual é CSS-first.

npx @tailwindcss/cli -i src.css -o public/app.css --watch

No HTML, escreva o nome completo das utilities:

<button class="rounded-lg bg-cyan-600 px-4 py-2 font-bold text-white">
  Marcar consulta
</button>

rounded-lg escolhe raio; bg-cyan-600, fundo; px-4 e py-2, padding nos eixos; font-bold, peso; text-white, cor do texto. A classe é pequena porque representa uma decisão pequena. O conjunto ainda forma um componente.

Abra o arquivo de saída e procure .bg-cyan-600. Se o seletor existe e a tela não muda, o problema está depois da geração: link para CSS errado, variante inativa ou cascata. Se não existe, investigue scanner e build. Essa divisão é o primeiro hábito profissional do curso.

O laboratório não executa o compilador Tailwind. Ele carrega um subconjunto CSS já compilado e deixa você alternar nomes disponíveis. Essa limitação é intencional e visível: você observa o vínculo classe-declaração sem fingir que o player possui Node. No seu projeto local, é o CLI que gera as regras.

Faça uma mudança por vez. Troque apenas padding, observe a caixa. Volte e troque apenas fundo, observe a cor. Se alterar os dois ao mesmo tempo, verá um resultado novo, mas não saberá qual classe provocou qual efeito.

Um erro comum é construir bg-${cor}-600 em código. O scanner encontra apenas pedaços, então a regra completa não nasce. Mapeie estados para strings inteiras, como confirmada: 'bg-emerald-600 text-white'. O mapa também documenta quais opções o componente aceita.

Você conclui a aula quando consegue responder três perguntas sem consultar: onde a classe é escrita, quando o Tailwind trabalha e o que o navegador recebe. Guarde o botão; ele será ampliado com tema, responsividade, foco e modo escuro nas próximas etapas.

Antes de fechar, execute também o build sem watch e abra o arquivo final num editor. Compare o seletor com a aba Styles do navegador. Essa dupla conferência cria um caminho de depuração que você poderá repetir mesmo quando o componente tiver dezenas de classes.