Nos termos do próprio skill
Cria design systems prontos para produção sobre o Tailwind CSS v4 (2024+). Percorre a configuração CSS-first, em que @theme no app.css substitui o tailwind.config.ts, tokens de cor semânticos escritos em OKLCH, tokens de raio e animação cujos keyframes ficam dentro de @theme, modo escuro baseado em classe declarado com @custom-variant, e estilos base aplicados em @layer base.
Também estabelece a hierarquia de tokens, de marca para semântico para tokens de componente, uma arquitetura de componentes que percorre estilos base, variantes, tamanhos, estados e overrides, além de padrões de componentes responsivos e acessíveis. Escrito para equipes que criam uma biblioteca de componentes, padronizam padrões de UI em uma base de código ou migram do Tailwind v3.
Como funciona
- 01Importe o Tailwind no Ponto de Entrada CSS
app.css começa com um único @import em vez das diretivas @tailwind base/components/utilities do v3.
- 02Declare o Conjunto de Tokens Semânticos Sob @theme
Background, foreground, primary, secondary, muted, accent, destructive, border, ring e card são todos declarados como tokens de cor em OKLCH.
- 03Adicione Tokens de Animação com Seus Keyframes
--animate-fade-in e --animate-fade-out são executados em 0.2s, --animate-slide-in e --animate-slide-out em 0.3s, cada um com um bloco @keyframes correspondente declarado dentro de @theme.
- 04Substitua os Mesmos Nomes de Token Sob .dark
O bloco dark reatribui todos os tokens em vez de introduzir novos nomes, espelhando background, foreground, primary, secondary, muted, accent, destructive, border, ring, card e ring-offset.
- 05Defina os Padrões da Camada Base
@layer base aplica border-border a todos os elementos e dá ao body o background temático, a cor de foreground e antialiasing.
- 06Construa Componentes na Ordem das Camadas
Os componentes passam por estilos base, variantes, tamanhos, estados e overrides nessa sequência.