Skip to content
TailwindCSS

O que vamos aprender

Antes de mais nada, vamos apresentar este workshop.

Introdução e Apresentação

  • Boas Vindas
  • Cronograma
  • Requisitos
  • Sobre o Instrutor

Introdução ao TailwindCSS

  • O que é o TailwindCSS
  • Utility First
  • Brincando no Tailwind Playground
  • Trazendo para o VSCode
    • Extensão oficial
    • Plugin Prettier

Tailwind Básico

  • Conceitos básicos
  • Sistema de Cores
  • Sistema de Medidas
  • Cores de Texto e Fundo
  • Margin e Padding
  • Largura e Altura
  • Tipografia
  • Flexbox
  • Exercício - Do Figma ao código: Card de Testimonial

Variantes e Estados

  • Variantes e Estado
  • Pseudo-classes

Layouts Responsivos

  • Breakpoints
  • Exercício

Estendendo seu tema

Dark mode com TailwindCSS

Plugins: Tipografia, Container Queries e Forms

Recursos Avançados

  • Funções e Diretivas
  • Quero CSS PURO!
    • Arbitrary properties
    • Arbitrary variants (como lidar com whitespace)
  • Classes mágicas
    • container
    • size-4
    • space-y-4
    • line-clamp-3
    • sr-only
    • divide-zinc-400
    • gradientes (from, to, via)
  • Animações
  • Diretivas
    • @import
    • @theme
    • @source
    • @utility
    • @variant
    • @custom-variant
    • @apply
    • @reference
  • Regras do Tailwind
    • Não construa as classes dinamicamente
    • Não use props para construir classes dinamicamente

Ferramentas importantes

  • tailwind-merge
  • clsx
  • Nossa função utilitária (cn())

Outras Ferramentas

  • Headless components
  • Ferramenta: Nearest Tailwind Colors
  • Bibliotecas: Tailwindui, headlessui, catalyst, tremor, daisyui, tremor, tailblocksk, shadcn