ADR 0039 – Tailwind v4 dans packages/ui
Statut : Décidée. Date : 01/10/2026. Lot 1, séquence B1 (piste B).
Contexte
Section intitulée « Contexte »Les jetons du design system « Registre » sont déjà spécifiés en variables CSS (BioTrace_design_system.md, §11), avec une correspondance shadcn prévue (--primary → --encre…) et deux densités portées par un attribut (data-densite="bureau"|"terrain"). packages/ui est vide (export {};). Les six composants de la séquence B1 (tampon de qualité, référence, jauge de capacité, état vide, bandeau « À traiter », état de cycle de vie) sont tous sur mesure : aucun n’est une primitive shadcn ou Radix.
Décision
Section intitulée « Décision »Tailwind v4, en mode CSS-first (@theme, aucun tailwind.config.js). Les jetons du design system sont recopiés tels quels dans packages/ui/src/registre.css, avec la correspondance shadcn en @theme et l’interdiction explicite de mapper une couleur de statut sur --destructive ou --success (CLAUDE.md). shadcn (CLI, components.json) et Radix restent différés à la séquence B2, quand un premier écran a besoin d’une primitive réelle (Dialog, Select, Popover).
Alternatives écartées
Section intitulée « Alternatives écartées »- CSS nu, sans Tailwind : aucune dépendance, mais abandonne la correspondance shadcn prévue par le design system et oblige à écrire à la main les utilitaires de densité et d’espacement.
- shadcn et Radix installés dès B1 : conforme à la lettre du design system, mais installe des primitives dont aucun des six composants de B1 ne se sert.
Conséquences
Section intitulée « Conséquences »packages/ui gagne des dépendances d’exécution (tailwindcss, @tailwindcss/vite) et des polices (@fontsource/ibm-plex-{sans,serif,mono}, poids 400 et 500 seulement). Le champ exports du paquet s’enrichit d’un sous-chemin ./registre.css. Les applications qui consomment packages/ui importent ce fichier et posent l’attribut data-densite sur leur racine.
Stratégie de sortie
Section intitulée « Stratégie de sortie »Les jetons restent des variables CSS standard, lisibles sans Tailwind. Retirer Tailwind reviendrait à réécrire les classes utilitaires des composants en CSS, sans toucher aux jetons ni à leurs valeurs.