Componentes
44. Guia de integração Tailwind/shadcn
estável
seed-componentes.md v1.43 · §44seção 46 de 9844-guia-de-integracao-tailwind-shadcn-estavel-v0.md · MD5 df516613Título completo no canon: Guia de integração Tailwind/shadcn — estável (v0.45) · GI1–GI5 · Bloco 6/6E · fecha o Bloco 6 · documento de consumo
Base: leitura obrigatória da skill
seed-ds-ui(o contrato org-side de produção React/TS/Tailwind/shadcn para o Lovable) +seed-tokens.mdv1.2 + prática shadcn/cva corrente. Este § é DOCUMENTO (sem preview próprio): define o contrato DS→código que a skill e o Lovable consomem.
| # | Decisão | Porquê | Descartado |
|---|---|---|---|
| GI1 | Cadeia de 3 camadas: primitivos (--turquesa-400… do tokens.md) → semânticos --seed-* (a ÚNICA camada que componente consome — regra vigente desde o B1) → aliases shadcn (--primary, --background… apontam para --seed-*, nunca para hex). Mudou o semântico, shadcn herda |
seed-ds-ui já declara aliases; o DS formaliza que o alvo do alias é o SEMÂNTICO, não o primitivo | Alias→primitivo (pula a camada de intenção; quebra dark de graça) |
| GI2 | Coerência com a skill seed-ds-ui (achado da leitura): a skill hoje publica primitivos + aliases; a camada --seed-* entra COMO FONTE dos aliases na próxima edição da skill — pendência registrada no backlog, não conflito (os valores hex são idênticos; muda a indireção) |
Uma fonte de verdade por cor; skill é consumidor do DS, não fork | Superseder a skill daqui (a skill tem dono e ciclo próprios) |
| GI3 | Tailwind: v4 = @theme mapeando --color-*→var(--seed-*); v3 = tailwind.config.ts colors:{...:'var(--seed-*)'}. Proibido: cor Tailwind default (bg-teal-500), hex em classe, dark: manual por componente (o dark vive nos tokens — trocar data-theme resolve tudo) |
seed-ds-ui (token-only, zero hardcoded); é como os previews do DS funcionam desde o B1 | Paleta Tailwind default "parecida" |
| GI4 | Receita cva: variantes de componente = cva com classes que só referenciam tokens; estados (hover/focus/selected) = os mesmos mecanismos do DS (anel interno em overflow, 3 sinais, hitbox W4 via pseudo). O §40–§43 têm par TanStack/shadcn nomeado (Table+TanStack, Checkbox, Command…) |
Padrão shadcn; paridade 1:1 com as decisões do DS | Variantes por CSS solto |
| GI5 | Contrato Lovable: ids estáveis (CP5/SL5) · componentes em src/components/seed/ (pasta da skill) · fontes self-hosted em produção (C.1) · a suite-render como referência de aceitação visual (as réguas de errata valem no produto: token fantasma, anel interno, ação terminal) |
seed-ds-ui (estrutura); C.1/C.5 do ESTADO_ATUAL | Contrato implícito |
Validação deste §: não há preview — a prova é a coerência (tokens citados existem no tokens.md v1.2; a skill referenciada foi lida nesta data; as réguas citadas têm teste-guarda nas suites). Pendência registrada: alinhar a skill seed-ds-ui à camada semântica na próxima edição dela.
Também cita o §44: banco-dados.