Skip to content
TailwindCSS
Search
Ctrl
K
Cancel
GitHub
X
LinkedIn
Email
Select theme
Dark
Light
Auto
Tailwind Básico
Intro ao Workshop
Boas-vindas!
O que vamos aprender
Para quem é esse workshop
Links Úteis
Quem sou eu?
Intro ao TailwindCSS
Afinal, o que é TailwindCSS
Utility First
Tailwind Playground
Trazendo para o VSCode
TailwindCSS Básico
Conceitos básicos
Sistema de Cores
Sistemas de Medidas
Cores de Texto e Fundo
Margin e Padding
Largura e Altura
Tipografia
Flexbox
Exercício 04 - Card de Depoimento
Variantes e Estados
Variantes e Estados
Pseudo-classes hover, focus, active, disabled
Layouts Responsivos
Layout Responsivo com TailwindCSS
Exercício 05 - Card de Depoimento Responsivo
Exercício Final
Exercício 06 Extra - Final
Tailwind Avançado
Intro ao Workshop
Boas-vindas!
O que vamos aprender
Para quem é esse workshop
Links Úteis
Quem sou eu?
Dicas e Classes Interessantes
group-*
peer-*
has-*
Comparação entre `group`, `peer`, `in` e `has`
Valores, Propriedades e Variantes arbitrários
Classes que fazem mágica
Regra Essencial do Tailwind CSS
Por trás dos panos
Diretivas e Funções
Diretivas no Tailwind
Diretiva `@theme`
Outras Diretivas
Funções
Dark Mode
Dark Mode
Transições e Animações
Transições
Animações
Componentes prontos com Animações
Plugins
Plugins no Tailwindcss
Forms
Tipografia
Outras Ferramentas
Headless components
Headless components
tailwind-merge
cn() do shadcn
CVA - Class Variance Authority
GitHub
X
LinkedIn
Email
Select theme
Dark
Light
Auto
Links Úteis
Ao longo do workshop vamos fazer 5 exercícios.
Link do Figma
O design dos exercícios estão nesse
arquivo do Figma
.