Custom Plugins

Définition

Extension de Tailwind avec ses propres utilitaires et variantes. En v3 via plugin() et addUtilities/addVariant en JavaScript ; en v4 via @utility (y compris fonctionnel avec --value()) et @custom-variant, directement en CSS, sans code.

Analogie

Fabriquer tes propres briques LEGO quand les formes standard ne suffisent plus.

Exemple de code

/* variante hocus:bg-blue-500 */
@custom-variant hocus (&:hover, &:focus);

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

Cas d'usage

Ajouter des variantes custom (hocus, supports) ou des utilitaires métier au framework.

Termes liés

Sources

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