Nel nostro percorso con Tailwind CSS, abbiamo visto come creare plugin statici per aggiungere classi di utilità specifiche al nostro progetto. Tuttavia, a volte potremmo avere esigenze più dinamiche, dove le classi di utilità devono essere generate in base a parametri o variabili.

Cominciamo creando un nuovo plugin per Tailwind CSS che genera classi di utilità dinamiche basate su un set di parametri o condizioni. Ad esempio, creiamo un grid-system custom per impostare l'altezza e la larghezza di un elemento.

// tailwind-dynamic-plugin.js
module.exports = function ({ addUtilities, theme }) {
  const utilities = {};

  // Genera classi per impostare altezza e larghezza dinamiche
  for (let i = 0; i <= 100; i++) {
    const value = i / 4; // incremento di 0.25rem
    utilities[`.h-${i}vh`] = { height: `${value}vh` };
    utilities[`.w-${i}vw`] = { width: `${value}vw` };
  }

  addUtilities(utilities, ['responsive']);
};

Le classi vanno da .h-0vh a .h-100vh e da .w-0vw a .w-100vw, incrementando di 0.25rem ad ogni passaggio, ciò rende il layour molto flessibile. Utilizzando il parametro responsive, stiamo creando automaticamente anche tutte le varianti sulla base della dimensione dello schermo.

Ora che abbiamo definito il nostro plugin, come nei casi precedentemente trattati, dobbiamo aggiungerlo alla configurazione di Tailwind CSS.

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

Una volta configurato, possiamo utilizzare le classi direttamente nel nostro codice HTML.

code lang="html"]