Tailwind e shadcn/ui na prática
14 posts nesta série
Uma trilha UI moderna para Tailwind, design tokens, componentes shadcn/ui, temas, formulários e organização.
Tailwind v4 + Vite: template completo de configuração em 5 minutos e estrutura de pastas
Aprenda a configurar um projeto com Tailwind CSS v4 e Vite do zero usando um template completo de 5 minutos e uma estrutura de pastas recomendada. Inclui um checklist de migração da v3 para a v4 para você montar rapidamente um projeto frontend moderno.
Tailwind CSS v4: novidades, desempenho, configuração e guia de migração
Uma análise detalhada do ganho de desempenho do motor Oxide no Tailwind CSS v4, da configuração CSS-first, da instalação simplificada e das breaking changes, com checklist e passos completos de migração
O que é shadcn/ui? Guia comparativo com MUI, Chakra UI e outras bibliotecas de componentes
Uma comparação aprofundada entre shadcn/ui, Material-UI, Chakra UI e Ant Design em sete critérios, como tamanho do bundle, flexibilidade de personalização, experiência de desenvolvimento e acessibilidade, para ajudar você a fazer a melhor escolha
Guia completo para instalar e personalizar temas do shadcn/ui (com variáveis CSS)
Aprenda a instalar e configurar o shadcn/ui e a personalizar temas com variáveis CSS, cores OKLCH e modo escuro. Domine boas práticas para criar uma interface alinhada à sua marca e faça a configuração inicial em 5 minutos.
Como montar a estrutura de um painel com shadcn/ui: boas práticas de Sidebar e Layout
Aprenda as melhores práticas para integrar a Sidebar do shadcn/ui ao Layout do Next.js. Veja arquitetura de componentes, design responsivo, controle de acesso e exemplos completos para criar um painel administrativo escalável.
Layout responsivo com Tailwind na prática: container queries e estratégia de breakpoints
Um guia aprofundado sobre container queries e estratégias de breakpoints no Tailwind CSS, da responsividade baseada na viewport aos layouts responsivos no nível dos componentes.
Modo escuro no Tailwind: comparação entre class e data-theme
Comparação completa entre as estratégias class e data-theme para o modo escuro no Tailwind CSS, com princípios de funcionamento, configuração e integração prática com frameworks para ajudar você a escolher a melhor opção para o projeto
Padrões de composição no shadcn/ui: boas práticas para integrar vários componentes
Aprenda as melhores práticas de composição no shadcn/ui e domine combinações comuns como Dialog + Form e DataTable + DropdownMenu, além de tópicos avançados como Context, gerenciamento de estado e otimização de desempenho.
shadcn/ui e Radix: como manter a acessibilidade ao personalizar componentes
O shadcn/ui usa Radix Primitives como base. Entenda como preservar a acessibilidade ao personalizar componentes, usar asChild, gerenciar o foco e manter os atributos ARIA para não comprometer a navegação por teclado.
Dialog, Sheet e Popover: acessibilidade e gerenciamento de foco em componentes de sobreposição
Uma análise detalhada da acessibilidade e do gerenciamento de foco nos componentes Dialog, Sheet e Popover do shadcn/ui, incluindo padrões WCAG, atributos ARIA, navegação por teclado, armadilha de foco e exemplos completos de código
Otimização de desempenho do Tailwind: JIT, configuração de content e controle do tamanho em produção
Entenda como funciona o modo JIT do Tailwind CSS, as melhores práticas para configurar content e uma estratégia de otimização em quatro camadas para reduzir o tamanho em produção, com casos práticos e uma análise dos novos recursos do Tailwind v4.
Astro + Tailwind: como evitar conflitos entre componentes de ilha e estilos globais
Entenda como astro-island e astro-slot afetam os seletores CSS, configure o Tailwind v4 no Astro e resolva quatro conflitos comuns de estilo.
React Compiler + shadcn/ui: desenvolvimento frontend na era da otimização automática
Entenda como usar o React Compiler em projetos com shadcn/ui, desde a ativação até experiências práticas, cuidados na migração e comparações de desempenho para passar da otimização manual à automática.
Solução de problemas comuns no shadcn/ui: conflitos de estilo, componentes que não renderizam e erros de tipo
Um guia sistemático para os três problemas mais comuns no desenvolvimento com shadcn/ui, com etapas detalhadas de diagnóstico e soluções para conflitos de estilo, falhas de renderização de componentes e erros de tipo do TypeScript.
