Marca48 mil · #4308

tailwind-patterns

Ajuda seu agente a usar princípios modernos do Tailwind CSS. Ele foca em configuração, design tokens e padrões visuais. Cria interfaces eficientes e bem estruturadas.

O que ela faz

Esta ferramenta ajuda a configurar e usar os recursos mais recentes do Tailwind CSS, como a nova forma de configurar o estilo dos elementos diretamente no CSS, usar tamanhos de tela menores para componentes individuais e criar layouts modernos.

Quando usar

✓Ao configurar o Tailwind CSS versão 4.
✓Ao definir cores, espaçamentos e fontes de forma organizada.
✓Ao criar designs que se adaptam a diferentes tamanhos de tela ou partes específicas da página.

Exemplo do que pedir para a IA

“Como configuro as cores primárias e secundárias usando o novo sistema de tokens?”

Quer saber mais? Abra as seções abaixo.

Como usar

O jeito mais fácil: copie a mensagem abaixo e cole no Claude, ChatGPT, Cursor ou outra IA. Ela lê a skill e segue as instruções.

Link da skill

https://github.com/sickn33/agentic-awesome-skills/blob/main/plugins/agentic-awesome-skills-claude/skills/tailwind-patterns/SKILL.md

Mensagem pronta para colar

Use esta skill para me ajudar: https://github.com/sickn33/agentic-awesome-skills/blob/main/plugins/agentic-awesome-skills-claude/skills/tailwind-patterns/SKILL.md Leia o arquivo SKILL.md desse link e siga as instruções dele na minha tarefa.

Ver no GitHub ↗Arquivo bruto

Como funciona

Você pode definir estilos diretamente em arquivos CSS usando a diretiva `@theme`. Isso permite organizar cores, fontes e espaçamentos de maneira mais eficiente, além de usar novas funcionalidades como 'container queries' para adaptar componentes.

Instalação

Jeito mais fácil: copie o link da skill e cole no Claude, ChatGPT ou Cursor pedindo para seguir as instruções.

No terminal (Claude Code, Codex, Cursor), na pasta do projeto:

npx skills add sickn33/agentic-awesome-skills --skill tailwind-patterns

Ou baixe só o arquivo:

curl -L https://raw.githubusercontent.com/sickn33/agentic-awesome-skills/main/plugins/agentic-awesome-skills-claude/skills/tailwind-patterns/SKILL.md -o SKILL.md

Conteúdo técnico (SKILL.md)

Tradução do texto original do autor no GitHub. Os comandos e códigos estão como no original.

Padrões do Tailwind CSS (v4 - 2025)

CSS moderno "utility-first" com configuração nativa do CSS.

Quando Usar

Use esta habilidade ao configurar o Tailwind v4, usando temas e "design tokens" baseados em CSS, ou ao implementar "container queries" e padrões modernos do Tailwind.

1. Arquitetura do Tailwind v4

O Que Mudou da v3

v3 (Legado)	v4 (Atual)
`tailwind.config.js`	Diretiva `@theme` baseada em CSS
Plugin PostCSS	Motor Oxide (10x mais rápido)
Modo JIT	Nativo, sempre ativo
Sistema de plugins	Recursos nativos do CSS
Diretiva `@apply`	Ainda funciona, desencorajada

Conceitos Principais da v4

Conceito	Descrição
CSS-first	Configuração em CSS, não em JavaScript
Motor Oxide	Compilador baseado em Rust, muito mais rápido
Nesting Nativo	Nesting do CSS sem PostCSS
Variáveis CSS	Todos os tokens expostos como variáveis `--*`

2. Configuração Baseada em CSS

Definição de Tema

@theme {
  /* Colors - use semantic names */
  --color-primary: oklch(0.7 0.15 250);
  --color-surface: oklch(0.98 0 0);
  --color-surface-dark: oklch(0.15 0 0);
  
  /* Spacing scale */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 2rem;
  
  /* Typography */
  --font-sans: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

Quando Estender vs Substituir

Ação	Usar Quando
Estender	Adicionar novos valores junto com os padrões
Substituir	Substituir a escala padrão inteiramente
Tokens Semânticos	Nomenclatura específica do projeto (primário, superfície)

3. Container Queries (Nativo na v4)

Breakpoint vs Container

Tipo	Responde a
Breakpoint (`md:`)	Largura da viewport
Container (`@container`)	Largura do elemento pai

Uso de Container Query

Padrão	Classes
Definir container	`@container` no pai
Breakpoint do container	`@sm:`, `@md:`, `@lg:` nos filhos
Containers nomeados	`@container/card` para especificidade

Quando Usar

Cenário	Usar
Layouts em nível de página	Breakpoints da viewport
Responsividade em nível de componente	Container queries
Componentes reutilizáveis	Container queries (independente do contexto)

4. Design Responsivo

Sistema de Breakpoints

Prefixo	Largura Mínima	Destino
(nenhum)	0px	Base "mobile-first"
`sm:`	640px	Celular grande / tablet pequeno
`md:`	768px	Tablet
`lg:`	1024px	Laptop
`xl:`	1280px	Desktop
`2xl:`	1536px	Desktop grande

Princípio "Mobile-First"

Escreva os estilos para mobile primeiro (sem prefixo)
Adicione substituições para telas maiores com prefixos
Exemplo: w-full md:w-1/2 lg:w-1/3

5. Modo Escuro

Estratégias de Configuração

Método	Comportamento	Usar Quando
`class`	Alternância de classe `.dark`	Switcher de tema manual
`media`	Segue a preferência do sistema	Sem controle do usuário
`selector`	Seletor customizado (v4)	Tematização complexa

Padrão de Modo Escuro

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`

6. Padrões de Layout Modernos

Padrões Flexbox

Padrão	Classes
Centralizar (ambos os eixos)	`flex items-center justify-center`
Pilha vertical	`flex flex-col gap-4`
Linha horizontal	`flex gap-4`
Espaço entre	`flex justify-between items-center`
Grade com quebra	`flex flex-wrap gap-4`

Padrões Grid

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 de sidebar	`grid grid-cols-[auto_1fr]`

Nota: Prefira layouts assimétricos/Bento em vez de grades simétricas de 3 colunas.

7. Sistema de Cores Moderno

OKLCH vs RGB/HSL

Formato	Vantagem
OKLCH	Perceptualmente uniforme, melhor para design
HSL	Matiz/saturação intuitivos
RGB	Compatibilidade legada

Arquitetura de Tokens de Cor

Camada	Exemplo	Propósito
Primitivo	`--blue-500`	Valores brutos de cor
Semântico	`--color-primary`	Nomenclatura baseada em propósito
Componente	`--button-bg`	Específico do componente

8. Sistema de Tipografia

…

Perguntas frequentes

Qual a diferença entre 'breakpoint' e 'container query'?

Breakpoint se refere ao tamanho da tela inteira, enquanto container query se refere ao tamanho do elemento pai, permitindo que componentes se adaptem independentemente do tamanho da página.

Como faço para meu site ficar escuro automaticamente quando o sistema operacional está escuro?

Você pode configurar o modo escuro para seguir a preferência do sistema usando a estratégia 'media' na configuração do Tailwind.

O que são 'design tokens'?

São variáveis que representam valores de design, como cores e espaçamentos. Eles ajudam a manter a consistência visual e facilitam a atualização de estilos em todo o projeto.

Detalhes

Descrição original do autor

Tailwind CSS v4 principles. CSS-first configuration, container queries, modern patterns, design token architecture.

repo: sickn33/agentic-awesome-skills

Popularidade

Estrelas no GitHub: 48 mil
Posição no ranking: #4308
Licença: MIT
Atualizada em: 15/10/2026

Essa skill é útil?

Entre para votar.

Comentários

Mais skills deste repositório

Agentes48 mil

00-andruia-consultant

Ajuda seu agente a iniciar ou melhorar projetos de IA. Ele analisa código, sugere ferramentas e cria planos de ação em espanhol.

sickn33/agentic-awesome-skills

Diversos48 mil

007

Faz seu agente realizar auditorias de segurança e modelagem de ameaças. É útil para proteger projetos contra ataques e vulnerabilidades.

sickn33/agentic-awesome-skills

Agentes48 mil

10-andruia-skill-smith

Ajuda seu agente a criar ou melhorar ferramentas de IA. Ele define como as ferramentas funcionam, escreve a documentação e valida a estrutura.

sickn33/agentic-awesome-skills

Diversos48 mil

20-andruia-niche-intelligence

Faz seu agente criar um resumo sobre um setor específico. É útil para entender o contexto, regras, padrões de uso e riscos de um projeto, usando fontes confiáveis.

sickn33/agentic-awesome-skills

Skills parecidas

Marca280 mil

brand-discovery

Ajuda a definir a identidade de uma marca através de entrevistas estruturadas. Cria um guia completo com o propósito, público e personalidade da marca.

affaan-m/ECC

Marca280 mil

brand-voice

Cria um perfil de escrita baseado em textos reais da marca. Garante que o conteúdo e as comunicações mantenham um estilo consistente e autêntico.

affaan-m/ECC

Marca181 mil

brand-guidelines

Faz seu agente aplicar as cores e o estilo visual da Anthropic em materiais. É útil para manter a identidade visual da empresa em diferentes projetos.

anthropics/skills