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>
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Eseguire query manipolando liste di tipi semplici con Entity Framework Core
Disabilitare automaticamente un workflow di GitHub (parte 2)
Eseguire operazioni sui blob con Azure Storage Actions
Utilizzare Azure AI Studio per testare i modelli AI
Utilizzare una qualunque lista per i parametri di tipo params in C#
La gestione della riconnessione al server di Blazor in .NET 9
Gestire i dati con Azure Cosmos DB Data Explorer
Popolare una classe a partire dal testo, con Semantic Kernel e ASP.NET Core Web API
Configurare lo startup di applicazioni server e client con .NET Aspire
Gestire la cancellazione di una richiesta in streaming da Blazor
Migliorare i tempi di risposta di GPT tramite lo streaming endpoint in ASP.NET Core
Path addizionali per gli asset in ASP.NET Core MVC