@one-nexty/tailwind-config
v0.2.0
Published
Adaptateur web : traduit @one-nexty/tokens en thème Tailwind CSS v4 (@theme) + preset JS de compatibilité.
Readme
@one-nexty/tailwind-config
Adaptateur web du design system : traduit @one-nexty/tokens en thème Tailwind CSS v4.
C'est une couche jetable. Le jour où l'on change de moteur CSS, on remplace ce package — les tokens, eux, ne bougent pas.
Utilisation (Tailwind v4 — chemin principal)
@import "tailwindcss";
@import "@one-nexty/tailwind-config/theme.css";Cet import apporte :
- la palette primitive dans un bloc
@theme→bg-primary-500,p-4,rounded-lg… ; - les tokens sémantiques dans un bloc
@theme inline→bg-surface,text-fg-muted,border-border,ring-ring… ; - les valeurs clair/sombre de ces tokens (
:rootet.dark) ; - la variante
dark:pilotée par la classe.darksur<html>; - une couche de base commune (fond, couleur de texte, police, focus visible).
Pourquoi deux blocs @theme ?
| Bloc | Contenu | Comportement |
| --------------- | --------------------- | ---------------------------------------------------------------------------------------------- |
| @theme | Palette primitive | Valeurs littérales. bg-primary-500 vaut #635BFF en clair comme en sombre. |
| @theme inline | Tokens sémantiques | bg-surface compile en var(--nx-color-surface). La bascule de thème se fait à l'exécution. |
Sans inline, Tailwind figerait la valeur au moment de la compilation et le thème sombre
demanderait un second passage de build.
Preset JavaScript (secondaire)
index.js expose le même thème sous forme d'objet { theme: { extend: … } }, construit
dynamiquement depuis @one-nexty/tokens. Il sert aux consommateurs qui ne lisent pas de CSS :
// App encore en Tailwind v3
import preset from "@one-nexty/tailwind-config";
export default { presets: [preset], content: ["./src/**/*.tsx"] };// Outillage : générateur de doc, export Figma, thème React Native
import { colors } from "@one-nexty/tailwind-config";Régénérer
pnpm --filter @one-nexty/tailwind-config build # lit @one-nexty/tokens → dist/theme.cssdist/ est gitignoré. Il dépend de @one-nexty/tokens : pnpm -r build garantit le bon ordre.