Override Tailwind avec du CSS fluide

EVA en mode variables uniquement

$build-class: false

Compilez EVA CSS sans les classes utilitaires — vous ne voulez que les custom properties var(--XX) générées, Tailwind continue de générer les classes.

Accès à tailwind.config.js

theme.extend

Vous allez faire pointer spacing, fontSize et colors vers var(--XX) au lieu de valeurs rem statiques.

Un build avant Tailwind

PostCSS / Vite / CLI

La feuille de style EVA compilée doit charger avant la sortie de Tailwind pour que les custom properties existent déjà quand les utilitaires les référencent.

Compiler les variables EVA

Même liste sizes/font-sizes qu'un projet EVA classique, mais $build-class: false — la sortie est un bloc :root minimal de var(--XX) et de variables de couleur OKLCH.

@use 'eva-css-fluid' with (
  $sizes: (4, 8, 16, 32, 64, 128),
  $font-sizes: (14, 16, 20, 24, 32),
  $build-class: false
);

Charger avant Tailwind

Importer le fichier compilé avant @tailwind base dans votre point d'entrée CSS pour que les variables soient déjà définies.

@import "./eva-vars.css";
@tailwind base;
@tailwind components;
@tailwind utilities;

Étendre le thème

Dans tailwind.config.js, faire pointer spacing, fontSize et colors vers le var(--XX) correspondant au lieu de valeurs statiques.

// tailwind.config.js
theme: {
  extend: {
    spacing: { 16: 'var(--16)', 32: 'var(--32)' },
    fontSize: { base: 'var(--fs-16)', xl: 'var(--fs-24)' },
    colors: { brand: 'var(--brand)', accent: 'var(--accent)' }
  }
}

Utiliser Tailwind normalement

p-16, text-base, bg-brand résolvent désormais vers les valeurs clamp() d'EVA — plus besoin de variantes md:/lg: pour cette propriété.

<div class="p-16 text-base bg-brand">

Cas ponctuels via valeurs arbitraires

Pour une valeur hors config, la syntaxe entre crochets de Tailwind atteint directement les variables EVA — sans toucher au config.

<div class="w-[var(--220)] text-[var(--fs-36)]">

Recompiler au besoin

Ajoutez une taille à $sizes, recompilez EVA, puis référencez-la — depuis tailwind.config ou directement en valeur arbitraire.

npx sass --load-path=node_modules styles/eva-vars.scss:styles/eva-vars.css

EVA possède l'échelle

Les valeurs du config Tailwind sont toujours var(--XX), jamais un rem ou px statique.

L'ordre de chargement compte

La feuille de style EVA doit être importée avant que les utilitaires Tailwind ne soient générés, sinon les variables ne résolvent à rien.

Supprimer les breakpoints redondants

Dès qu'un utilitaire est piloté par une variable fluide, supprimez les variantes sm:/md:/lg: pour cette propriété.

Garder $sizes minimal

Ne listez que les tailles réellement référencées dans tailwind.config.js ou en valeurs arbitraires.