Workshop completo no Youtube
Neste workshop, você aprenderá a usar o Tailwind CSS, desde a configuração inicial até a criação de layouts responsivos e estilização avançada. Exploraremos a aplicação de classes utilitárias, personalização de temas, integração com frameworks como React e Vue, e técnicas de otimização de performance. Com atividades práticas e exemplos, este workshop proporcionará o conhecimento necessário para melhorar suas habilidades de estilização web usando Tailwind CSS.
Módulo 1: Introdução ao Tailwind CSS
Sessão 1.1: Bem-vindo ao Tailwind CSS
Apresentação do workshop e objetivos. O que é Tailwind CSS e por que usá-lo? Comparação com outras frameworks CSS (Bootstrap).
Sessão 1.2: Configuração do Ambiente
Usando somente o CDN Instalação do Node.js e npm. Configuração de um projeto com Tailwind CSS. Estrutura de diretórios e arquivos principais.
Módulo 2: Conceitos Básicos do Tailwind CSS
Sessão 2.1: Utilizando Classes Utilitárias
Visão geral Princípio das classes utilitárias. Aplicação básica de classes utilitárias em HTML. Customização de utilitários.
Sessão 2.2: Responsividade e Design Adaptável
Uso de classes responsivas. Breakpoints no Tailwind CSS. Exemplo prático: Criando um layout responsivo.
Módulo 3: Estilização com Tailwind CSS
Sessão 3.1: Tipografia e Cores
Classes de tipografia. Configuração de fontes customizadas. Paleta de cores e customização.
Sessão 3.2: Layouts e Grades
Sistema de grid do Tailwind CSS. Flexbox e uso de classes de layout. Exemplo prático: Construindo uma página inicial com grid e flexbox.
Módulo 4: Customização Avançada
Sessão 4.1: Configuração do Tailwind
Configuração e uso do arquivo tailwind.config.js. Extendendo e customizando temas. Plugins do Tailwind CSS.
Sessão 4.2: Estilização Condicional e Pseudo-classes
Uso de pseudo-classes (hover, focus, etc.). Classes condicionais e interações. Exemplo prático: Criando componentes interativos.
Módulo 5: Práticas Avançadas e Integração
Sessão 5.1: Integração com Frameworks e Ferramentas
Usando Tailwind com React, Vue, ou Angular. Integração com ferramentas de construção como Webpack. Exemplo prático: Criando um componente estilizado em React.
Sessão 5.2: Melhores Práticas e Performance
Otimização de performance com Tailwind CSS. Removendo CSS não utilizado com PurgeCSS. Boas práticas de organização e manutenção de código.
Material
