Nel nostro percorso alla scoperta di Tailwind CSS, approfondiamo ora l'utilizzo pratico di questo framework per la creazione di componenti di base all'interno di un'applicazione web statica, provando ad utilizzare elementi comuni come navbar, bottoni e form.
Per iniziare, creiamo una navbar responsiva utilizzando le classi di utilità di Tailwind. Definiamo la struttura base nel nostro file .html e applichiamo le classi di Tailwind per ottenere uno stile adeguato.
// index.html <nav class="bg-blue-500 p-4"> <div class="container mx-auto flex justify-between items-center"> <div class="text-white font-bold text-xl">Il Nostro Logo</div> <ul class="flex space-x-4"> <li class="text-white hover:text-gray-300">Home</li> <li class="text-white hover:text-gray-300">Servizi</li> <li class="text-white hover:text-gray-300">Contatti</li> </ul> </div> </nav>
In questo esempio, le classi di Tailwind CSS come bg-blue-500, p-4, mx-auto, e hover:text-gray-300 sono utilizzate per definire lo stile della navbar. Tailwind semplifica la gestione degli stili, consentendoci di concentrarci sulla struttura e il layout.
Se aprissimo ora la pagina, in un qualsiasi browser, ci accorgeremmo che nessuno stile CSS è applicato. Controllando poi il file public/styles.css, frutto della compilazione di style.css, noteremo che non conterrà alcuna classe utilizzata per la navbar. Questo accade perchè nella configurazione di Tailwind CSS, che verrà letta da postcss non abbiamo specificato quale file html/js utilizzerà le classi Tailwind CSS. Rimediamo a questo problema, aggiungendo il puntatore corretto all'interno di tailwind.config.js
module.exports = { content: [ "./public/**/*.{html,js}" ], ... }
Ricompilando il file, la pagina verrà ora presentata seguendo gli stili CSS impostati.
Passiamo ora alla creazione di bottoni: a differenza di altri framework, come Bootstrap non troveremo una classe btn-primary, bensì dovremmo impostare ogni aspetto dello stile per ognuno dei bottoni
<div class="flex space-x-4"> <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"> Pulsante Primario </button> <button class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded"> Pulsante Secondario </button> </div>
Infine, impostiamo un form elegante utilizzando le classi di Tailwind CSS:
<form class="max-w-md mx-auto mt-8"> <div class="mb-4"> <label class="block text-gray-700 text-sm font-bold mb-2" htmlFor="username"> Nome Utente </label> <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="username" type="text" placeholder="Inserisci il tuo nome utente" /> </div> <div class="mb-6"> <label class="block text-gray-700 text-sm font-bold mb-2" htmlFor="password"> Password </label> <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="password" type="password" placeholder="********" /> </div> <div class="flex items-center justify-between"> <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" type="button" > Accedi </button> <a class="inline-block align-baseline font-bold text-sm text-blue-500 hover:text-blue-800" href="#"> Password dimenticata? </a> </div> </form>
Tailwind semplifica la definizione degli stili dei campi di input, dei pulsanti e delle etichette; ma la rende anche molto verbosa, per questo motivo nei prossimi script vedremo come migliorare e semplificare la scrittura di un componente per Tailwind CSS.
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Utilizzare il metodo IntersectBy per eseguire l'intersection di due liste
Gestione degli stili CSS con le regole @layer
Estrarre dati randomici da una lista di oggetti in C#
Referenziare un @layer più alto in CSS
Usare il colore CSS per migliorare lo stile della pagina
Collegare applicazioni server e client con .NET Aspire
Migliorare i tempi di risposta di GPT tramite lo streaming endpoint in ASP.NET Core
Sfruttare GPT-4o realtime su Azure Open AI per conversazioni vocali
Configurare lo startup di applicazioni server e client con .NET Aspire
Creare una libreria CSS universale: Nav menu
Eseguire i worklow di GitHub su runner potenziati
Utilizzare gRPC su App Service di Azure