# Scrivere un plugin Tailwind

In Tailwind 4 un plugin personalizzato è una regola @utility nel CSS. Il plugin JavaScript conviene solo quando devi distribuire utility come pacchetto.

> Pagina: https://ui.eneawork.it/blog/tailwind-plugin-personalizzato
> Markdown: https://ui.eneawork.it/blog/tailwind-plugin-personalizzato.md

*2026-11-01*

In Tailwind CSS 4 un plugin personalizzato si scrive con @utility nel CSS; il plugin JavaScript serve solo quando devi distribuirlo come pacchetto.

La domanda «Error: PostCSS plugin tailwindcss requires PostCSS 8» vale 122 voti su Stack Overflow, letta il 31 ottobre 2026 con la Stack Exchange API e registrata in docs/keyword-data.json. Il catalogo EneUI misura 111.985 componenti, 1.556 blocchi e 12.808 icone da 1.472 librerie, misurati e letti da /api/stats il 1 novembre 2026. Tailwind CSS è distribuito con licenza MIT: repository tailwindlabs/tailwindcss, file LICENSE.

## La via breve: @utility

@import "tailwindcss"; @utility content-auto { content-visibility: auto; contain-intrinsic-size: 1px 500px; }

L'utility finisce nel layer utilities e accetta le varianti: hover:content-auto, lg:content-auto. Non serve JavaScript, non serve tailwind.config.js e non serve un pacchetto.

## Utility con un valore

Una utility funzionale riceve un argomento tramite --value():

@theme { --tab-size-github: 8; } @utility tab-* { tab-size: --value(--tab-size-*, integer, [integer]); }

Così funzionano tab-2, tab-76, tab-github e tab-[3]. --value() legge chiavi del tema, valori nudi e valori arbitrari; le dichiarazioni che non risolvono vengono omesse dall'output.

## Quando serve un plugin JavaScript

Un plugin JavaScript resta utile se pubblichi utility per altri progetti. Si scrive con l'helper plugin():

import plugin from "tailwindcss/plugin"; export default plugin(({ addUtilities, addVariant }) => { addUtilities({ ".content-auto": { "content-visibility": "auto" }, }); addVariant("hocus", ["&:hover", "&:focus-visible"]); });

Si carica con la direttiva @plugin, che accetta un nome di pacchetto o un percorso locale. Le API stabili sono addUtilities, addComponents e addVariant.

@import "tailwindcss"; @plugin "./hocus-plugin.js";

Le opzioni corePlugins e safelist della configurazione JavaScript non sono supportate in 4. Al posto della safelist c'è @source inline().

## La limitazione

Un plugin JavaScript è codice tuo: ha un nome, una versione e un test da mantenere, e le utility che genera non esistono nel progetto finché qualcuno non lo carica. In cambio non è tipizzato e un selettore sbagliato fallisce in silenzio. Per due utility interne @utility costa meno e resta nello stesso file.

## Dove continuare

Nel catalogo: i componenti Tailwind, la libreria tailwind-admin e le sezioni hero, tutte costruite con utility. Il framework è spiegato in che cos'è Tailwind CSS, le classi mancanti in content paths; per scegliere una libreria leggi le migliori librerie Tailwind e il confronto Tailwind contro CSS Modules.

## FAQ

### Devo ancora scrivere plugin JavaScript in Tailwind 4?

Solo se pubblichi utility per altri progetti. Dentro un'applicazione, @utility nel CSS copre quasi tutti i casi.

### Come si carica un plugin in Tailwind 4?

Con la direttiva @plugin seguita dal nome del pacchetto o da un percorso locale. La direttiva va nel file CSS che importa tailwindcss.

### Che differenza c'è tra @utility e addUtilities?

@utility è una regola CSS elaborata dalla build, addUtilities è una funzione dell'API JavaScript. La prima resta nel progetto, la seconda richiede un pacchetto.

### Posso usare la safelist in Tailwind 4?

No, safelist e corePlugins della configurazione JavaScript non sono supportati in 4. Al loro posto c'è @source inline(), che elenca le classi da generare.

### Un plugin può aggiungere una variante?

Sì, con addVariant nell'API JavaScript o con @custom-variant nel CSS. Per una variante sola, @custom-variant è la via più breve.