Trilha · Iniciante
Tailwind CSS
Estilizar pela classe utilitária: do primeiro botão ao design system inteiro, sem sair do HTML.
13 lições em ordem de estudo
Começando
- 01O que é TailwindO que é o Tailwind CSS, por que ele escreve estilo no HTML e o que o compilador faz com cada classe — com o CSS gerado impresso no terminal.testado
- 02Instalar Tailwind v4Instalação do Tailwind v4 do jeito CSS-first: um @import, nenhum tailwind.config.js, e o build rodando em watch — com a saída de cada comando.testado
Fundamentos
- 03EspaçamentoComo p-4, m-2, gap-6, w-full e size-10 viram rem no CSS gerado, de onde sai a escala do Tailwind e como usar um valor que não existe nela.testado
- 04CoresComo funciona a escala de 50 a 950, o que muda no v4 com oklch, como aplicar opacidade com a barra e como colocar a cor da sua marca dentro da paleta.testado
- 05Tipografiatext-lg, font-bold, leading, tracking e text-balance na prática — mais o plugin typography, que estiliza um artigo inteiro com uma classe só.testado
Layout
- 06Flexboxflex, items-center, justify-between, gap e flex-1 resolvendo os cinco layouts que aparecem em todo projeto: navbar, card, sidebar, form e footer.testado
- 07Gridgrid-cols, col-span, row-span e gap montando galeria, dashboard e formulário — mais o truque do auto-fit sem escrever media query nenhuma.testado
- 08ResponsividadePor que md:flex significa a partir de 768px, como usar max-lg: para o caminho inverso e quando a container query resolve melhor que o breakpoint.testado
Estados e variantes
- 09Estados, group e peerhover:, focus-visible:, disabled:, group-hover: e peer-checked: — os estados que fazem um botão e um formulário parecerem prontos, com o CSS de cada um.testado
- 10Dark modeComo dark: funciona, como trocar do prefers-color-scheme para uma classe no html e como guardar a escolha do usuário sem o flash de tela branca.testado
Tema e componentes
- 11@theme e tokensO tailwind.config.js acabou: agora o tema é CSS. Como declarar --color-marca, trocar a fonte e a régua de espaçamento, e o que @theme inline muda.testado
- 12@applyO @apply transforma um punhado de utilitários numa classe só. Onde isso ajuda de verdade, onde devolve o problema do CSS antigo e o que fazer no lugar.testado
- 13Tailwind em ReactComo transformar 20 classes repetidas num componente React com variantes, sem que a className vinda por prop brigue com a classe padrão do botão.testado