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.
日本語の概要は準備中です。原文の説明を表示しています。