Come ultimo script di questa serie, facciamo un passo indietro: dopo aver visto come installare e utilizzare Tailwind CSS, sia in un progetto HTML che React, vediamo come estenderlo attraverso la creazione di plug-in.

Questa funzionalità è ottima se stiamo lavorando all'interno di più progetti con un template simile: ci permette di creare un ecosistema solido e condividere un set di classi di utilità.

Partiamo con la creazione di un nuovo file per il nostro plugin

// tailwind-plugin.js
module.exports = function ({ addUtilities }) {
  const newUtilities = {
    '.bg-orange': {
      'background-color': '#FFA500',
    },
    '.rotate-180': {
      transform: 'rotate(180deg)',
    },
  };

  addUtilities(newUtilities, ['responsive', 'hover']);
};

In questo esempio, stiamo definendo due classi:
- bg-orange per impostare lo sfondo arancione
- rotate-180 per ruotare un elemento di 180 gradi

Gli argomenti responsive e hover serviranno per generare le varianti riguardo alla dimensione della finestra e rispetto alla posizione del mouse sull'elemento: 'md:bg-orange', 'hover:bg-orange' etc.

Per utilizzare il plugin appena creato dobbiamo ricordarci di aggiungerlo alla nostra configurazione, in modo tale che la compilazione e la creazione delle classi avvenga automaticamente grazie agli script pre-esistenti.

// tailwind.config.js
module.exports = {
  // ... altre configurazioni Tailwind ...
  plugins: [
    require('./tailwind-plugin'),
    // altri plugin eventuali
  ],
};

Utiliziamo dunque le classi nell'HTML.

<div class="bg-orange">Elemento con sfondo arancione</div>

<div class="rotate-180">Elemento ruotato di 180 gradi</div>