Workshop

TailwindCSS Básico - V4

Aprenda Tailwind na sua última versão: 4.0

Este workshop prático de Tailwind CSS foi projetado para desenvolvedores que desejam aprimorar suas habilidades em estilização com o mais popular framework CSS do mundo. Tailwind CSS é um framework utility-first que facilita a criação de CSS diretamente no HTML. Vamos do básico até o avançado neste workshop!

O que você vai aprender:

Introdução ao Tailwind CSS

  • O que é Tailwind CSS e por que utilizá-lo
  • O que é utility-first
  • Como configurar e utilizar o Tailwind Playground

Conceitos Básicos de Estilização

  • Classes utilitárias e camadas CSS (base, components e utilities)
  • Personalização de espaçamento, cores e tipografia
  • Uso de @apply para criar classes reutilizáveis

Variantes e Estados

  • Uso de pseudo-classes para hover, active e focus
  • Modificadores peer e group para estilizar elementos relacionados
  • Customização de formulários e botões

Layouts Responsivos

  • Introdução ao Flexbox e Grid no Tailwind
  • Como usar breakpoints para responsividade
  • Criando layouts modernos com colunas e espaçamentos

Recursos Avançados

  • Implementando Dark Mode
  • Utilização de animações e transições
  • Uso de plugins para extensão de funcionalidades
  • Otimização para produção