Tailwind CSS può essere modificato e integrato attraverso svariate librerie. In questo script prenderemo in considerazione Preline UI, una libreria disponibile su NPM che applica un tema e altre funzionalità a Tailwind CSS in progetti React.
Utilizzando il progetto esistente, possiamo procedere all'installazione della libreria.
npm install preline-ui # plugin necessario per la corretta disposizione delle forms npm install -D @tailwindcss/forms
Occorre ricordare che Tailwind CSS utilizza dei processi per ridurre al minimo il CSS, dovremo dunque inserire il codice sorgente di Preline UI e i relativi plugin all'interno di tailwind.config.js.
//tailwind.config.js module.exports = { content: [ [...], 'node_modules/preline/dist/*.js', ], plugins: [ [...], require('@tailwindcss/forms'), require('preline/plugin'), ], }
All'interno del nostro componente React possiamo ora utilizzare Preline UI per stilizzare i componenti, in questo caso un bottone e un campo di input.
// app.jsx import React from 'react'; import 'preline-ui'; function App() { return ( <input type="text" className="py-3 px-4 block w-full border-gray-200 rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400 dark:focus:ring-gray-600" placeholder="mio placeholder"/> <button type="button" className="py-3 px-4 inline-flex items-center gap-x-2 text-sm font-semibold rounded-lg border border-transparent bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600"> Premi qui </button> ); }
L'utilizzo di tutte le classi fornite aiuta a stabile i comportamenti degli elementi nei vari casi d'uso; siano essi utilizzati all'interno di un tema scuro, disabilitati o selezionati.
Nel prossimo script troveremo una soluzione alla verbosità che il tema richiede, in modo tale da poter creare dei componenti atomici, senza la necessità di inserire classi per tutte le casistiche.
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Persistere la ChatHistory di Semantic Kernel in ASP.NET Core Web API per GPT
Supportare la sessione affinity di Azure App Service con Application Gateway
Eseguire una ricerca avanzata per recuperare le issue di GitHub
Effettuare il log delle chiamate a function di GPT in ASP.NET Web API
Change tracking e composition in Entity Framework
Eseguire un metodo asincrono dopo il set di una proprietà in Blazor 8
Triggerare una pipeline su un altro repository di Azure DevOps
Creare una libreria CSS universale - Rotazione degli elementi
Creare una libreria CSS universale: Cards
Migliorare la scalabilità delle Azure Function con il Flex Consumption
Assegnare un valore di default a un parametro di una lambda in C#
Evitare il flickering dei componenti nel prerender di Blazor 8