Skip to content
TailwindCSS

O que vamos aprender

Antes de mais nada, vamos apresentar este workshop. Nós já fizemos um Workshop de TailwindCSS Básico que cobriu os seguintes tópicos:

  • Introdução e Apresentação
  • Introdução ao TailwindCSS
  • Tailwind Básico
  • Variantes e Estados
  • Layouts Responsivos

Agora, o objetivo é o aprofundamento com tópicos mais complexos - e mais interessantes também 👀

O cronograma deste Workshop (TailwindCSS Avançado) está abaixo:

Classes e Dicas Interessantes

  • Group, In, Peer e Has()
    • group
    • in
    • peer
    • has
  • Propriedades arbitrárias
  • Variantes arbitrárias (como lidar com whitespace)
  • Classes que fazem “mágica”:
    • container
    • size-4
    • space-y-4
    • line-clamp-3
    • truncate
    • sr-only
    • divide-zinc-400
    • gradientes (from, to, via)
  • Regras do Tailwind
  • TailwindCSS por trás dos panos

Diretivas e Funções

  • Diretivas no TailwindCSS
  • Diretiva @theme - Estendendo Temas
  • Outras diretivas
    • @import
    • @source
    • @utility
    • @variant
    • @apply
  • Funções do TailwindCSS

Dark Mode com TailwindCSS

  • Dark mode como variante
  • Instalando dark mode

Trabalhando com Transições e Animações

  • Transições
  • Animações
  • Componentes prontos

Plugins do TailwindCSS: Tipografia e Forms

  • Instalando Plugins
  • Plugin de Formulário
  • Plugin de Tipografia

Ferramentas Importantes

  • Componentes Headless
  • Biblioteca de Componentes
  • tailwind-merge
  • Nossa função utilitária (cn()) inspirada pelo shadcn.
  • cva e tailwind-variants

Outras Ferramentas