ADR-0010: CSS e Estilização — Tailwind CSS + CVA + tailwind-merge

Status

Accepted

Context and Problem Statement

O sistema precisa de uma estratégia de estilização consistente entre atenvi-ui, atenvi-admin e atenvi-web, com suporte a variantes de componente tipadas e composição segura de classes.

Decision Drivers

• Consistência com o ecossistema shadcn/ui (já adotado)
• Variantes de componente tipadas sem CSS-in-JS
• Merge seguro de classes Tailwind (evita conflitos)
• Design tokens via Tailwind config

Considered Options

• Tailwind puro
• Tailwind + CVA + tailwind-merge
• CSS Modules + Tailwind
• Styled Components

Decision Outcome

Chosen option: Tailwind CSS + CVA + tailwind-merge, porque CVA (class-variance-authority) tipifica variantes de componente com TypeScript, tailwind-merge resolve conflitos de classes na composição, e o stack completo é o padrão do shadcn/ui já adotado.

Positive Consequences

• Variantes tipadas: variant: 'primary' | 'secondary' com autocomplete
• tailwind-merge evita conflitos ao sobrescrever classes
• Design tokens centralizados no tailwind.config.ts
• Sem runtime CSS-in-JS

Negative Consequences

• Classes longas em componentes complexos
• CVA adiciona dependência, mas é leve (~1kb)

More Information

• Projetos: atenvi-ui, atenvi-admin, atenvi-web
• tailwind.config.ts compartilhado via atenvi-ui
• Utilitário padrão: cn() = clsx + tailwind-merge