Workshop
TailwindCSS Avançado
Nível
25 aulas
3h30
Assistir agora
1. Boas-vindas ao workshop
Este workshop - TailwindCSS Avançado é ideal para quem já sabe TailwindCSS mas deseja aprender técnicas mais avançadas para aumentar a produtividade. Ele também é a continuação do Workshop TailwindCSS Básico que já foi realizado pelo Codante.
O cronograma deste Workshop (TailwindCSS Avançado) está abaixo:
Classes e Dicas Interessantes
- Peer, Group e In
- Arbitrary properties
- Arbitrary variants (como lidar com whitespace)
- Outras Classes que fazem "mágica":
- Regras do Tailwind
Diretivas e Funções
- Diretivas no TailwindCSS
- Diretiva
@theme
- Estendendo Temas - Outras diretivas
- Funções do TailwindCSS
Dark mode com TailwindCSS
- Dark mode como variante
- Exercício
Trabalhando com Transições e Animações
- Transições
- Animações existentes
- Criando e registrando animações
Plugins do TailwindCSS: Tipografia e Forms
- Instalando Plugins
- Plugin de Formulário
- Plugin de Tipografia
Ferramentas importantes
- tailwind-merge
clsx
eclassnames
- cva e tailwind-variants
- Nossa função utilitária (
cn()
) inspirada peloshadcn
.
Outras Ferramentas
- Headless components
- Bibliotecas de Componentes
- Entendendo a classe Group
- Exercício prático com Group
- Transições e animações
- Explorando a classe Peer
- Apresentando a classe Has
- Exercício prático com Has
- Valores e propriedades arbitrárias
- Classes mágicas do Tailwind
- Divisões e espaçamentos
- Truncamento e clamp
- Regra essencial do Tailwind
- Implementando o Dark Mode
- Exercício prático de Dark Mode
- Entendendo transições
- Animações no Tailwind
- Plugins no Tailwind CSS
- Componentes Headless
- Utilizando a função CN
- Class Variance Authority
- Finalizando o workshop