@utility (utilitaires personnalisés)

Définition

Directive de Tailwind v4 qui déclare un utilitaire maison compatible avec toutes les variantes (hover:, lg:, dark:). La forme fonctionnelle nom-* accepte des valeurs via --value() (thème, entier nu, littéral, arbitraire) et un modificateur via --modifier(), avec --default() comme repli (v4.3). Elle remplace @layer utilities et addUtilities().

Analogie

Ajouter sa propre pièce au jeu de construction, taillée pour s'emboîter avec les autres.

Exemple de code

@utility content-auto {
  content-visibility: auto;
}

/* tab-2, tab-4, tab-[7] */
@utility tab-* {
  tab-size: --value(--tab-size-*, integer, [integer]);
}

/* text-fluid-3/1.2 : valeur + modificateur */
@utility text-fluid-* {
  font-size: --value(integer, --default(2));
  line-height: --modifier(number, --default(1.2));
}

Cas d'usage

Étendre Tailwind avec des propriétés absentes (content-visibility, text-shadow…) ou des échelles métier, sans plugin JavaScript.

Anti-pattern

Termes liés

Sources

• tailwindcss.com/docs/adding-custom-styles
• tailwindcss.com/docs/functions-and-directives
• tailwindcss.com/blog/tailwindcss-v4-3