TailwindCSS Básico

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