0Pricing
Tailwind CSS Academy icon

Tailwind CSS Academy

HTMLCssFrontendDesign

Domine o framework CSS utility-first confiável por OpenAI, Vercel e Shopify. Aprenda todos os utilitários, design responsivo, dark mode, animações e otimização para produção.

🤖 Com Inteligência Artificial📚 30 cursos👥 100.000+ alunos⭐ Classificação 4,9
Visão Geral do Curso

Tailwind CSS Mastery

Domine o framework CSS utility-first confiável por OpenAI, Vercel e Shopify. Aprenda todos os utilitários, design responsivo, dark mode, animações e otimização para produção. Esta trilha abrange 30 mini-cursos progressivos do absoluto iniciante (A1) até avançado (B2), com aulas focadas e breves questionários para fixar cada conceito.

O Que Você Vai Aprender

Você começará com os fundamentos e construirá através de tópicos intermediários e avançados, cada curso aproveitando o anterior. Cada aula é prática, com exemplos reais e um tutor de IA disponível quando precisar de ajuda.

Como Funciona

Cada curso é dividido em quatro aulas focadas. Complete algumas aulas por dia e você dominará a trilha completa em semanas, não em meses.

Comece a Aprender →

Como Você Aprenderá

🎯
Aulas Interativas
Exercícios de codificação práticos com feedback em tempo real
🤖
Tutor de IA
Obtenha ajuda instantânea de nossa IA quando você ficar preso
💻
Editor Integrado
Escreva e execute código diretamente no seu navegador
🏆
Certificado
Ganhe um certificado ao concluir o curso
Currículo

30 Cursos

Todos os cursos no caminho de aprendizado Tailwind CSS Academy.

01

O que é Tailwind CSS?

A14 aulas

Descubra a filosofia baseada em utilitários por trás do Tailwind CSS e entenda como ela difere dos frameworks CSS tradicionais, como o Boot…

02

Utilitários de tipografia

A14 aulasPRO

Domine o amplo conjunto de utilitários de tipografia do Tailwind para controlar tamanhos e pesos de fonte, alturas de linha, espaçamento en…

03

Cores e planos de fundo

A14 aulasPRO

Explore a extensa paleta de cores do Tailwind e aprenda a aplicar cores de plano de fundo, gradientes e imagens de fundo. Entenda como usar…

04

Espaçamento: margem e preenchimento

A14 aulasPRO

Aprenda a escala consistente de espaçamento do Tailwind para adicionar margem e preenchimento a qualquer elemento. Entenda os atalhos direc…

05

Flexbox com Tailwind

A14 aulasPRO

Aplique layouts CSS Flexbox usando os utilitários flex do Tailwind sem escrever uma única linha de CSS personalizado. Crie layouts horizont…

06

Layout de grade com Tailwind

A24 aulasPRO

Use o CSS Grid por meio dos utilitários de grade do Tailwind para criar layouts bidimensionais complexos. Defina colunas, linhas e áreas us…

07

Dimensionamento: largura, altura e proporção

A24 aulasPRO

Controle as dimensões dos elementos usando os utilitários de largura, altura, restrições mínimas e máximas e proporção do Tailwind. Crie co…

08

Bordas e sombras

A24 aulasPRO

Estilize as bordas e a profundidade dos elementos com os utilitários de borda e sombra do Tailwind. Aprenda a adicionar cantos arredondados…

09

Variações de foco, foco do cursor e estados

A24 aulasPRO

Adicione interatividade à sua interface aplicando estilos condicionalmente aos estados de foco do cursor, foco, ativo, desabilitado e outro…

10

Pontos de quebra para design responsivo

A24 aulasPRO

Crie layouts que se adaptem a qualquer tamanho de tela usando os pontos de quebra responsivos do Tailwind, com abordagem para dispositivos…

11

Modo escuro com Tailwind

B14 aulasPRO

Implemente o modo escuro em seus aplicativos web usando a variante dark integrada do Tailwind. Aprenda a diferença entre a estratégia basea…

12

Arquivo de configuração do Tailwind

B14 aulasPRO

Desbloqueie todo o potencial do Tailwind dominando o arquivo tailwind.config.js. Aprenda a estender o tema padrão, adicionar valores person…

13

Cores, fontes e espaçamento personalizados

B14 aulasPRO

Adapte o Tailwind à sua marca adicionando cores personalizadas, integrando fontes do Google e definindo uma escala de espaçamento personali…

14

A diretiva @apply

B14 aulasPRO

Aprenda quando e como usar a diretiva @apply do Tailwind para extrair padrões repetidos de utilitários em classes CSS reutilizáveis. Equili…

15

Animações e transições

B14 aulasPRO

Adicione movimento suave à sua interface usando os utilitários integrados de transição e animação do Tailwind. Aprenda a controlar duração,…

16

Padrões de componentes: botões, cartões e selos

B14 aulasPRO

Crie elementos de interface refinados e reutilizáveis usando classes utilitárias do Tailwind. Aprenda os padrões comuns para botões com var…

17

Padrões de componentes: barras de navegação e barras laterais

B14 aulasPRO

Crie barras de navegação responsivas e barras laterais recolhíveis usando os utilitários do Tailwind. Aprenda a lidar com menus hambúrguer…

18

Padrões de componentes: formulários e entradas

B14 aulasPRO

Estilize elementos de formulário acessíveis e atraentes usando os utilitários do Tailwind. Aprenda a criar entradas de texto, seleções, cai…

19

Padrões de componentes: modais e menus suspensos

B14 aulasPRO

Crie padrões de interface sobrepostos, como modais, caixas de diálogo e menus suspensos, usando Tailwind e o mínimo de JavaScript. Aprenda…

20

Modo JIT e otimização para produção

B14 aulasPRO

Entenda o mecanismo Just-In-Time do Tailwind e como ele gera apenas o CSS que você usa. Aprenda a otimizar seu pacote de produção, analisar…

21

Tokens de design e tematização sistemática

B24 aulasPRO

Estabeleça um sistema robusto de tokens de design na configuração do Tailwind para permitir temas consistentes de várias marcas. Mapeie tok…

22

Tailwind com React e Next.js

B24 aulasPRO

Integre o Tailwind CSS a aplicativos React e Next.js usando a configuração oficial. Aprenda as práticas recomendadas para aplicar utilitári…

23

Integração com Headless UI

B24 aulasPRO

Combine Tailwind CSS com Headless UI para criar componentes totalmente acessíveis e sem estilos predefinidos. Aplique suas próprias classes…

24

Escrita de plugins do Tailwind

B24 aulasPRO

Amplie a funcionalidade do Tailwind escrevendo plugins personalizados que adicionem novos utilitários, componentes e variantes. Aprenda a A…

25

Componentes acessíveis com Tailwind

B24 aulasPRO

Crie componentes de interface que atendam aos padrões de acessibilidade WCAG usando os utilitários do Tailwind para contraste de cores, ger…

26

Tailwind em produção: tamanho do pacote e práticas recomendadas

B24 aulasPRO

Adote práticas profissionais recomendadas para disponibilizar o Tailwind CSS em aplicativos de produção. Aprenda auditoria de pacotes, estr…

27

Criação de uma página de destino completa

B24 aulasPRO

Aplique tudo o que aprendeu até agora para criar do zero uma página de destino de marketing completa e responsiva usando apenas Tailwind CS…

28

Criação de uma interface de painel

B24 aulasPRO

Construa uma interface completa de painel administrativo usando Tailwind CSS. Crie uma barra lateral, uma barra superior, cartões de estatí…

29

Arquitetura CSS com Tailwind

B24 aulasPRO

Explore como o Tailwind se encaixa em estratégias mais amplas de arquitetura CSS usadas em projetos de grande escala. Aprenda a organizar a…

30

Projeto final: sistema de design com Tailwind

B24 aulasPRO

Reúna todas as habilidades desta trilha para criar um sistema de design completo baseado em Tailwind. Defina tokens, crie uma biblioteca de…

Perguntas Frequentes

Perguntas Frequentes

O curso Tailwind CSS Academy é gratuito?

Sim. Você pode começar o curso Tailwind CSS Academy gratuitamente e completar suas aulas interativas sem custo. Uma assinatura PRO opcional desbloqueia ferramentas avançadas de IA e um certificado compartilhável.

Preciso de experiência anterior para aprender HTML?

Não. O curso começa com os fundamentos e gradualmente passa para tópicos mais avançados, então você pode começar mesmo sem experiência anterior com HTML.

Como vou aprender HTML no CoddyKit?

Você aprende fazendo. Aulas interativas curtas combinam uma explicação clara com um exercício de codificação prático que executa em tempo real, e um tutor de IA disponível 24/7 oferece ajuda personalizada sempre que você ficar preso.

Ganho um certificado ao concluir Tailwind CSS Academy?

Sim. Alunos PRO podem fazer um exame e ganhar um certificado de conclusão compartilhável com um código verificável para o curso Tailwind CSS Academy.

Posso aprender HTML no meu celular?

Sim. CoddyKit está disponível na web e como aplicativos nativos para iOS e Android, então você pode aprender HTML em qualquer dispositivo e seu progresso sincroniza entre eles.

Comece Tailwind CSS Academy Agora

Junte-se a milhares de alunos dominando programação com aulas potenciadas por IA.

Começar Grátis →Ver Todos os Cursos