---
fonte: 01-canonicos/seed-componentes.md
versao_da_fonte: v1.43
secao: 44
titulo: "Guia de integração Tailwind/shadcn — `estável` (v0.45) · GI1–GI5 · Bloco 6/6E · fecha o Bloco 6 · documento de consumo"
sequencia: 46 de 98
bytes_do_corpo: 2929
md5_do_corpo: df51661335cd16216a75e369f6a0fed5
gerado_por: 06-validacao/geradores/gen-camada-ia.py
nota: fatia GERADA — o corpo abaixo é byte a byte o trecho do canônico; edite o canônico, nunca esta fatia. Canônico inteiro em https://ds.seed.eng.br/01-canonicos/seed-componentes.md
---
## 44. 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.md` v1.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.

---