Tailwind CSS v4: da utility ao produto
Transforme decisões de CSS em uma interface consistente e pronta para evoluir.
Seu progresso neste dispositivo
0 de 6 aulasVocê escolhe quando uma aula está concluída.Começar o cursoPrograma do curso
Do primeiro conceito ao projeto
Faça a primeira utility virar CSS no build da versão 4Instale o fluxo CSS-first, compile um botão e aprenda a provar no arquivo de saída que cada classe usada realmente virou uma regra CSS.PendenteConstrua ritmo, cor e tipografia com tokens utilitáriosUse spacing, tamanho, cor e tipografia para montar a primeira seção de produto sem números aleatórios nem contraste decidido apenas pelo olhar.PendenteComponha a página com Flexbox e Grid sem margens mágicasEscolha eixos e trilhos para montar cabeçalho, grade de benefícios e seção de preço que continuam estáveis quando o conteúdo aumenta.PendenteFaça o componente responder à tela e ao próprio containerAplique mobile-first, intervalos de breakpoint e container query para adaptar a mesma seção sem duplicar conteúdo nem inverter a ordem semântica.PendenteComplete estados acessíveis, tema próprio e dark modeDefina tokens CSS-first, aplique foco, hover e disabled e ofereça modo claro, escuro e sistema sem comunicar estado somente por cor.PendenteEntregue a página de produto responsiva e minificadaIntegre hero, benefícios, preço e formulário, revise classes, gere o CSS de produção e valide layout, teclado, tema e conteúdo real.Pendente
Depois da leitura
Continue estudando nos canais do Grupo Club
Os vídeos são complementares. Todo conceito, exercício e critério de conclusão já está explicado nas aulas em texto.
Prefere aprender em vídeo?
Tem aula sobre este assunto no nosso canal.
DevClub no YouTubeTAILWIND CSS - APRENDA DO ZERO - Recriando o Facebook com Tailwind CSSAssistir a aula
DevClub no YouTubeCriando o Site do iPhone 17 PRO MAX do ZERO (React + Tailwind) — Projeto CompletoAssistir a aula