Valeurs arbitraires et coût associé

La syntaxe des valeurs arbitraires de Tailwind vous permet d’utiliser directement n’importe quelle valeur CSS dans un nom de classe, en employant une notation entre crochets. Au lieu d’être limité à l’échelle prédéfinie de Tailwind, vous pouvez écrire w-[347px], text-[#1a2b3c] ou grid-cols-[1fr_2fr_1fr].

Cette fonctionnalité, activée par le moteur JIT, est l’une des capacités les plus puissantes de Tailwind. Elle comble l’écart entre les classes utilitaires et les rares cas où une valeur précise, en dehors de l’échelle, est réellement nécessaire.

La syntaxe entre crochets fonctionne avec n’importe quel préfixe d’utilitaire Tailwind. La valeur entre les crochets est transmise directement comme valeur CSS. Les espaces à l’intérieur de la valeur sont représentés par des traits de soulignement (Tailwind les remplace avant l’analyse).

Pour les utilitaires qui génèrent plusieurs propriétés CSS, seule la propriété concernée reçoit la valeur arbitraire. Par exemple, p-[12px] définit les quatre valeurs de remplissage à 12px, comme p-4, mais avec une valeur personnalisée.

Les valeurs arbitraires conviennent dans certaines situations précises :

• Positionnement précis : une info-bulle qui doit s’aligner exactement sur un point de référence (top-[3px])
• Contraintes externes : adapter la hauteur ou le rayon de bordure d’un composant tiers
• Couleurs de marque uniques : une couleur de marque qui ne correspond pas bien à la palette Tailwind (bg-[#e63946])
• Expressions CSS dynamiques : valeurs calc, min, max ou clamp

Elles ne conviennent PAS aux valeurs qui appartiennent au système de design : utilisez plutôt l’extension du thème.

Lorsqu’une valeur est utilisée à plusieurs endroits de votre projet, elle doit figurer dans l’extension du thème plutôt que sous forme de valeur arbitraire. Son ajout au thème lui donne un nom sémantique, garantit sa cohérence et vous permet de la modifier à un seul endroit.

Une bonne règle consiste à promouvoir une valeur arbitraire dans le thème si vous l’utilisez deux fois dans des fichiers différents. Si elle n’apparaît qu’une seule fois dans un contexte très précis, la valeur arbitraire convient.

Chaque valeur arbitraire unique génère une règle CSS unique. Cinq utilisations de w-[347px] dans le même fichier ne génèrent qu’une seule règle CSS (JIT déduplique les règles). En revanche, w-[347px], w-[348px] et w-[349px] dans des composants différents génèrent chacun une règle distincte : trois règles distinctes pour des valeurs qui ne diffèrent que d’un pixel.

C’est le coût des valeurs arbitraires : elles peuvent empêcher la réutilisation du CSS qui rend les classes utilitaires efficaces. Dix largeurs arbitraires légèrement différentes génèrent dix règles distinctes plutôt qu’un utilitaire partagé.

Au-delà des préfixes d’utilitaires, le JIT de Tailwind prend également en charge les propriétés CSS arbitraires avec la syntaxe [property:value] : des crochets contenant à la fois le nom d’une propriété CSS et une valeur séparés par deux-points.

C’est la solution de secours pour les propriétés CSS auxquelles Tailwind ne fournit pas d’utilitaire, comme [mask-image:linear-gradient(...)], [scroll-snap-type:x_mandatory] ou les propriétés préfixées par un fournisseur. Utilisez cette possibilité avec modération : si vous constatez que vous employez de nombreuses propriétés arbitraires, envisagez plutôt d’ajouter un plugin Tailwind.

Les valeurs arbitraires se combinent entièrement avec tous les préfixes de variantes. Vous pouvez associer les variantes réactives, de survol, de focus, de mode sombre et autres à n’importe quelle valeur arbitraire, exactement comme avec les utilitaires standard.

Vous bénéficiez ainsi de toute la puissance du système de variantes de Tailwind pour les valeurs personnalisées. Une couleur de survol personnalisée hors échelle, une largeur personnalisée réactive ou une couleur arbitraire personnalisée en mode sombre fonctionnent toutes parfaitement.

Lorsque vous utilisez des couleurs hexadécimales arbitraires, vous pouvez également appliquer le modificateur d’opacité avec une barre oblique : bg-[#e63946]/50 définit l’arrière-plan avec une opacité de 50 %. Cela fonctionne car la syntaxe d’opacité avec barre oblique est une fonctionnalité de JIT qui s’applique que la couleur de base provienne de la palette ou soit une valeur arbitraire.

Vous pouvez également utiliser directement les fonctions rgba() ou hsl() entre les crochets pour contrôler arbitrairement l’opacité ou le modèle de couleur.

Certains caractères à l’intérieur des valeurs arbitraires doivent être échappés car ils ont une signification en CSS ou en HTML. Dans les valeurs arbitraires de Tailwind, utilisez des traits de soulignement pour les espaces (Tailwind les convertit automatiquement) et échappez les parenthèses ainsi que les autres caractères spéciaux dans calc() en utilisant des traits de soulignement pour les espaces à l’intérieur de la fonction.

Pour les valeurs d’URL (comme les images d’arrière-plan), placez la valeur entre apostrophes : bg-[url('/img/hero.png')]. Tailwind conserve les apostrophes dans le CSS généré.

Recherchez régulièrement dans votre base de code toutes les utilisations de valeurs arbitraires afin d’identifier celles qui pourraient être intégrées au thème. Un grep rapide repère chaque classe entre crochets de votre projet :

Toute valeur apparaissant plus de deux fois dans des fichiers différents est une excellente candidate pour devenir un jeton de thème nommé. Toute valeur apparaissant une seule fois peut rester une valeur arbitraire. Les valeurs qui semblent appartenir à une échelle cohérente (comme w-[350px], w-[360px], w-[370px]) indiquent qu’un modèle d’utilisation hors échelle doit être standardisé.

Les valeurs arbitraires se combinent naturellement avec les classes utilitaires standard dans la même chaîne de classes. Vous pouvez mélanger librement les utilitaires d’échelle et les valeurs arbitraires : c’est un choix intentionnel, pas une solution de contournement. Le système de design couvre 95 % des cas avec les utilitaires d’échelle ; les valeurs arbitraires couvrent les 5 % restants.

La règle essentielle consiste à utiliser d’abord les utilitaires d’échelle et à ne recourir aux valeurs arbitraires que lorsque l’échelle ne fournit réellement pas ce dont vous avez besoin. Faites respecter cette règle lors des revues de code afin d’éviter que votre balisage ne devienne une collection de valeurs arbitraires hors échelle.

Dans cette leçon, vous avez appris que les valeurs arbitraires utilisent la syntaxe entre crochets [value] pour définir n’importe quelle valeur CSS sur n’importe quel utilitaire, grâce à la génération à la demande de JIT ; que chaque valeur arbitraire unique génère une règle CSS unique, de sorte que les valeurs hors échelle répétées dans plusieurs fichiers doivent être intégrées au thème ; et que les traits de soulignement représentent les espaces dans les valeurs arbitraires (par exemple calc(100%_-_64px)). Ce cours sur JIT et l’optimisation en production s’achève ici ; nous allons maintenant explorer les jetons de design et la thématisation systématique.