Princípios do Tailwind CSS v4. Configuração baseada em CSS, container queries, padrões modernos, arquitetura de design tokens.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
설치 방법 보기설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.
Utility-first CSS moderno com configuração nativa de CSS.
| v3 (Legado) | v4 (Atual) |
|---|---|
tailwind.config.js | Diretiva @theme baseada em CSS |
| Plugin PostCSS | Oxide engine (10x mais rápido) |
| Modo JIT | Nativo, sempre ativo |
| Sistema de plugins | Recursos nativos de CSS |
Diretiva @apply | Ainda funciona, desaconselhado |
| Conceito | Descrição |
|---|---|
| CSS-first | Configuração em CSS, não JavaScript |
| Oxide Engine | Compilador baseado em Rust, muito mais rápido |
| Nesting Nativo | Nesting de CSS sem PostCSS |
| Variáveis CSS | Todos os tokens expostos como variáveis --* |
@theme {
/* Cores - use nomes semânticos */
--color-primary: oklch(0.7 0.15 250);
--color-surface: oklch(0.98 0 0);
--color-surface-dark: oklch(0.15 0 0);
/* Escala de espaçamento */
--spacing-xs: 0.25rem;
--spacing-sm: 0.5rem;
--spacing-md: 1rem;
--spacing-lg: 2rem;
/* Tipografia */
--font-sans: 'Inter', system-ui, sans-serif;
--font-mono: 'JetBrains Mono', monospace;
}
| Ação | Use Quando |
|---|---|
| Estender | Adicionar novos valores junto aos padrões |
| Sobrescrever | Substituir escala padrão completamente |
| Tokens semânticos | Nomenclatura específica do projeto (primary, surface) |
| Tipo | Responde A |
|---|---|
Breakpoint (md:) | Largura do viewport |
Container (@container) | Largura do elemento pai |
| Padrão | Classes |
|---|---|
| Definir container | @container no pai |
| Breakpoint de container | @sm:, @md:, @lg: nos filhos |
| Containers nomeados | @container/card para especificidade |
| Cenário | Use |
|---|---|
| Layouts no nível da página | Breakpoints de viewport |
| Design responsivo no nível de componente | Container queries |
| Componentes reutilizáveis | Container queries (independentes de contexto) |
| Prefixo | Largura Mínima | Alvo |
|---|---|---|
| (nenhum) | 0px | Base mobile-first |
sm: | 640px | Telefone grande / tablet pequeno |
md: | 768px | Tablet |
lg: | 1024px | Laptop |
xl: | 1280px | Desktop |
2xl: | 1536px | Desktop grande |
w-full md:w-1/2 lg:w-1/3| Método | Comportamento | Use Quando |
|---|---|---|
class | Classe .dark ativa | Alternador de tema manual |
media | Segue preferência do sistema | Sem controle do usuário |
selector | Seletor customizado (v4) | Temas complexos |
| Elemento | Claro | Escuro |
|---|---|---|
| Fundo | bg-white | dark:bg-zinc-900 |
| Texto | text-zinc-900 | dark:text-zinc-100 |
| Bordas | border-zinc-200 | dark:border-zinc-700 |
| Padrão | Classes |
|---|---|
| Centrar (ambos os eixos) | flex items-center justify-center |
| Stack vertical | flex flex-col gap-4 |
| Linha horizontal | flex gap-4 |
| Espaçamento entre | flex justify-between items-center |
| Grade com wrap | flex flex-wrap gap-4 |
| Padrão | Classes |
|---|---|
| Auto-fit responsivo | grid grid-cols-[repeat(auto-fit,minmax(250px,1fr))] |
| Assimétrico (Bento) | grid grid-cols-3 grid-rows-2 com spans |
| Layout sidebar | grid grid-cols-[auto_1fr] |
Nota: Prefira layouts assimétricos/Bento em vez de grids simétricos de 3 colunas.
| Formato | Vantagem |
|---|---|
| OKLCH | Perceptualmente uniforme, melhor para design |
| HSL | Matiz/saturação intuitivos |
| RGB | Compatibilidade legada |
| Camada | Exemplo | Propósito |
|---|---|---|
| Primitiva | --blue-500 | Valores de cor brutos |
| Semântica | --color-primary | Nomenclatura baseada em propósito |
| Componente | --button-bg | Específico do componente |
| Tipo | Recomendado |
|---|---|
| Sans | 'Inter', 'SF Pro', system-ui, sans-serif |
| Mono | 'JetBrains Mono', 'Fira Code', monospace |
| Display | 'Outfit', 'Poppins', sans-serif |
| Classe | Tamanho | Uso |
|---|---|---|
text-xs | 0.75rem | Labels, captions |
text-sm | 0.875rem | Texto secundário |
text-base | 1rem | Texto do corpo |
text-lg | 1.125rem | Texto destaque |
text-xl+ | 1.25rem+ | Headings |
| Classe | Efeito |
|---|---|
animate-spin | Rotação contínua |
animate-ping | Pulso de atenção |
animate-pulse | Pulso sutil de opacidade |
animate-bounce | Efeito de salto |
| Padrão | Classes |
|---|---|
| Todas as propriedades | transition-all duration-200 |
| Específica | transition-colors duration-150 |
| Com easing | ease-out ou ease-in-out |
| Efeito hover | hover:scale-105 transition-transform |
| Sinal | Ação |
|---|---|
| Mesma combinação de classes 3+ vezes | Extrair componente |
| Variantes de estado complexas | Extrair componente |
| Elemento do design system | Extrair + documentar |
| Método | Use Quando |
|---|---|
| Componente React/Vue | Dinâmico, JS necessário |
@apply em CSS | Estático, JS não necessário |
| Design tokens | Valores reutilizáveis |
| Não Faça | Faça |
|---|---|
| Valores arbitrários em toda parte | Use escala de design system |
!important | Corrija especificidade propriamente |
style= inline | Use utilities |
| Duplicar listas longas de classes | Extraia componente |
| Misturar config v3 com v4 | Migre completamente para CSS-first |
Usar @apply pesadamente | Prefira componentes |
| Princípio | Implementação |
|---|---|
| Purge unused | Automático em v4 |
| Evite dinamismo | Sem classes com template string |
| Use Oxide | Padrão em v4, 10x mais rápido |
| Cache builds | CI/CD caching |
Lembre-se: Tailwind v4 é CSS-first. Abraça variáveis CSS, container queries e recursos nativos. O arquivo de config agora é opcional.
아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.
로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.
아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.
Especialista em construir experiências 3D para a web - Three.js, React Three Fiber, Spline, WebGL e cenas 3D interativas. Cobre configuradores de produtos, portfólios 3D, websites imersivos e adição de profundidade às experiências web. Use quando: website 3D, three.js, WebGL, react three fiber, experiência 3D.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
Quando o usuário quer planejar, projetar ou implementar um teste A/B ou experimento. Também use quando o usuário menciona "teste A/B", "split test", "experimento", "testar essa mudança", "copy variante", "teste multivariado" ou "hipótese". Para implementação de rastreamento, veja analytics-tracking.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
Auditar e melhorar a acessibilidade web seguindo as diretrizes WCAG 2.1. Use quando solicitado para "melhorar acessibilidade", "auditoria a11y", "conformidade WCAG", "suporte a leitor de tela", "navegação por teclado" ou "tornar acessível".
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
Testes e benchmarking de agentes LLM incluindo testes comportamentais, avaliação de capacidades, métricas de confiabilidade e monitoramento em produção—onde até os melhores agentes alcançam menos de 50% em benchmarks do mundo real. Use quando: testes de agentes, avaliação de agentes, benchmark de agentes, confiabilidade de agentes, teste de agentes.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
Criar, gerenciar e orquestrar agentes de IA usando o CLI AI Maestro. Use quando o usuário pedir para "criar agente", "listar agentes", "deletar agente", "hibernar agente", "despertar agente", "instalar plugin", "mostrar agente", "reiniciar agente" ou qualquer tarefa de gerenciamento do ciclo de vida do agente.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
Gerencie múltiplos agentes CLI locais via sessões tmux (iniciar/parar/monitorar/atribuir) com agendamento compatível com cron.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.