Le style : le cube CSS et Tailwind

Tout le style d'un bloc passe par un seul champ, cssProperties. Plus aucune classe CSS ne se cache dans les réglages : si vous cherchez l'ancien vt_classNameElement_input de la V20, il est devenu une entrée de ce champ, du côté de la cible input.

Ce champ n'a pas été fusionné avec properties pour une raison simple : il n'a pas la même forme. Une même propriété de style prend des valeurs différentes selon l'élément visé, la largeur d'écran et l'état de l'élément. D'où un rangement à quatre niveaux.

La forme : quatre niveaux, toujours

cssProperties[cible][point de rupture][variante][propriété] = valeur

Viser une cible qui n'est pas déclarée par le type est une erreur structurelle : l'écriture est refusée. C'est voulu — une cible mal orthographiée produirait sinon un style qui n'apparaît jamais.

Le piège des unités

Onze propriétés ont besoin d'une entrée compagnon qui donne l'unité. Sans elle, aucune classe n'est produite : pas d'erreur, pas d'avertissement, le style n'apparaît simplement pas.

gap  width  minWidth  maxWidth  height  minHeight  maxHeight  top  bottom  left  right

Piège : width: 100 seul ne fait rien. Il faut width: 100 et widthUnit: "px". C'est la cause la plus fréquente d'un « j'ai mis une largeur et rien ne bouge ».

Tout le reste est en pixels implicites et ne prend pas d'unité : les marges intérieures et extérieures, les arrondis, les épaisseurs de bordure, la taille de texte.

L'ombre se règle d'un bloc

Six sous-propriétés — décalage horizontal et vertical, flou, étalement, couleur, et le mode intérieur — sont assemblées ensemble en une seule classe, puis oubliées individuellement. En renseigner une sans les autres donne une ombre que vous n'avez pas demandée.

Tailwind : la feuille compilée est fermée

Le fichier output.css est pré-compilé. Une classe qui n'a pas été extraite au moment de la compilation n'existe pas à l'exécution, aussi correcte qu'elle paraisse dans le HTML. C'est toute la différence entre « ma classe est ignorée » et « ma classe est fausse » — et c'est presque toujours la première.

La règle d'extraction qui coûte des heures

L'extracteur parcourt les chaînes de caractères des fichiers 4D, HTML et JavaScript, mais il ne regarde une chaîne que si ses premiers caractères correspondent à un préfixe Tailwind ou DaisyUI connu. Les expressions de recherche sont ancrées au début de la chaîne.

$vt_Class:="flex gap-2 w-full"      // analysée : commence par "flex"
$vt_Class:="mon-widget flex gap-2"  // IGNORÉE EN ENTIER : "mon-widget" n'est pas un préfixe connu

Piège : placer une classe maison en tête retire silencieusement toutes les classes utilitaires de cette chaîne au prochain rebuild. Des blocs qui fonctionnaient depuis des mois perdent leur mise en page — des boutons étirés sur toute la largeur en sont le symptôme classique. Mettez votre classe personnelle en dernier, ou dans une chaîne séparée.

Modifier la source Tailwind

Changer le fichier source tailwind.css ne demande pas de recompilation : un rafraîchissement du Storage suffit. La recompilation complète n'est nécessaire que lorsque l'ensemble des classes utilisées change — et elle doit être lancée depuis le dossier de dépendances de l'application.

Un cube « plat » subsiste dans les bases migrées

Une base venue de la V20 peut contenir un cube auquel il manque le niveau des variantes. La validation détecte la valeur mal placée et l'ignore au lieu de lever une erreur, parce que remettre le cube en forme est un travail à part.

À savoir : ce silence n'est pas une approbation. Un cube resté plat se rend de façon imprévisible ; c'est la normalisation du cube qui le répare, pas un simple enregistrement depuis le panneau.

La suite

Tout ce qui n'est pas du style se range dans Le contrat properties. Les cibles déclarées par un type donné figurent sur sa propre page, à la section Les objets.