Man mano che la vostra carriera nello sviluppo avanza, è probabile che usiate tecnologie che vi aiutano a fare di più scrivendo meno codice. Un solido framework frontend come Tailwind CSS è un modo per farlo.
In questo articolo, impareremo a conoscere Tailwind CSS, un framework CSS che aiuta a costruire e progettare pagine web. Inizieremo spiegando come installare e integrare Tailwind CSS nel vostro progetto, vedremo alcune applicazioni pratiche e anche come creare i vostri stili e plugin personalizzati.
Cominciamo!
Cos’È Tailwind CSS?
Tailwind CSS è un framework CSS (Cascading Style Sheets) con classi predefinite che potete usare per costruire e progettare pagine web direttamente nel vostro markup. Vi permette di scrivere CSS nel vostro codice HTML sotto forma di classi predefinite.
Definiremo cos’è un framework e cosa intendiamo con “utility-first CSS” per aiutarvi a capire meglio cosa sia Tailwind CSS.
Cos’È un Framework?
Come termine generale di programmazione, un framework è uno strumento che fornisce componenti riutilizzabili e già pronti costruiti sulla base delle caratteristiche di uno strumento già esistente. Lo scopo generale della creazione di framework è quello di aumentare la velocità di sviluppo con meno lavoro.
Ora che sappiamo cosa significa framework, dovrebbe essere più semplice capire che Tailwind CSS è uno strumento costruito sulle caratteristiche dei CSS. Tutte le funzionalità del framework sono derivate dagli stili CSS composti come classi.
Cos’È un Framework CSS Utility-First?
Quando diciamo utility-first CSS, ci riferiamo a classi nel nostro markup (HTML) con funzionalità predefinite. Questo implica che dovete solo scrivere una classe con stili predefiniti collegati a essa, e quegli stili verranno applicati all’elemento.
In un caso in cui state lavorando con i vanilla CSS (cioè CSS senza alcun framework o libreria), dovreste prima dare al vostro elemento un nome di classe e poi allegare diverse proprietà e valori a quella classe, che, a sua volta, applicherà lo stile al vostro elemento.
Vi mostriamo un esempio. Qui creeremo un pulsante con angoli arrotondati e un testo che dice “Click me”. Questo è l’aspetto che avrà il pulsante:
Lo faremo prima usando i vanilla CSS e poi usando le classi di utility disponibili in Tailwind CSS.
Con i Vanilla CSS
<button class="btn">Click me</button>Abbiamo assegnato ai tag dei pulsanti la classe btn, che sarà stilizzata utilizzando un foglio di stile esterno. Cioè:
.btn {
background-color: #000;
color: #fff;
padding: 8px;
border: none;
border-radius: 4px;
}Con Tailwind CSS
<button class="bg-black p-2 rounded">Click me</button>Tutto questo è necessario per ottenere lo stesso effetto dell’esempio con vanilla CSS. Non abbiamo creato nessun foglio di stile esterno dove scrivere gli stili perché ogni nome di classe che abbiamo usato ha già uno stile predefinito.
Prerequisiti per Usare Tailwind CSS
Prima di usare Tailwind CSS, ci sono alcuni prerequisiti che dovreste considerare di soddisfare per usare senza difficoltà le caratteristiche del framework. Eccone alcuni:
- Buona conoscenza dell’HTML, della sua struttura e di come funziona
- Solide basi di CSS – media queries, flexbox e sistema a griglia
Dove Si Può Usare Tailwind CSS?
Potete usare Tailwind CSS in progetti web frontend, inclusi framework JavaScript come React.js, Next.js, Laravel, Vite, Gatsby, ecc.
Pro e Contro di Tailwind CSS
Ecco alcuni dei vantaggi dell’utilizzo di Tailwind CSS:
- Processo di sviluppo più veloce
- Vi aiuta a fare più pratica con i CSS perché le utility sono simili
- Tutte le utility e i componenti sono facilmente personalizzabili
- La dimensione complessiva del file per la produzione è solitamente piccola
- Facile da imparare se conoscete già i CSS
- Buona documentazione per imparare
Alcuni degli svantaggi dell’utilizzo di Tailwind CSS includono:
- Il vostro markup potrebbe sembrare disorganizzato per grandi progetti perché tutti gli stili si trovano nei file HTML.
- Non è facile da imparare se non conoscete bene il CSS.
- Vi obbliga a costruire tutto da zero, compresi i vostri elementi di input. Quando installate Tailwind CSS, tutti gli stili CSS predefiniti vengono rimossi.
- Tailwind CSS non è l’opzione migliore se state cercando di ridurre al minimo il tempo speso per sviluppare il frontend del vostro sito web e concentrarvi principalmente sulla logica del backend.
Quando Usare Tailwind CSS
Tailwind CSS viene usato per accelerare il processo di sviluppo scrivendo meno codice. Include un sistema di progettazione che aiuta a mantenere la coerenza tra i vari requisiti di progettazione come il padding, la spaziatura e così via; con questo, non dovete preoccuparvi di creare i vostri sistemi di progettazione.
Potete anche usare Tailwind CSS se state cercando di usare un framework che sia facilmente configurabile perché non vi costringe a usare i componenti (barre di navigazione, pulsanti, moduli e così via) sempre allo stesso modo; potete scegliere come devono essere i vostri componenti. Ma non dovreste mai usare Tailwind se non avete imparato e fatto pratica con i CSS.
Somiglianze e Differenze tra Tailwind CSS e Altri Framework CSS
Ecco alcune somiglianze:
- Vi aiutano a lavorare più velocemente.
- Sono dotati di classi predefinite.
- Sono stati costruiti su regole CSS.
- Sono entrambi facili da imparare e da usare con una conoscenza pratica dei CSS.
Ora guardiamo alcune delle differenze:
- Tailwind CSS è diverso dalla maggior parte dei framework perché dovete creare i vostri componenti. Per esempio, Bootstrap ha componenti come barre di navigazione, pulsanti e così via, ma con Tailwind dovete costruire tutto in autonomia.
- Alcuni framework come Bootstrap non sono facilmente personalizzabili, quindi siete costretti a usare i loro modelli di progettazione. In Tailwind, voi controllate il flusso di tutto.
- È richiesta una conoscenza approfondita dei CSS per usare Tailwind. Scrivere i nomi delle classi non è sufficiente perché dovete combinarli come se steste scrivendo CSS vanilla per ottenere lo stesso risultato. Tutto quello che dovete sapere nella maggior parte degli altri framework è quale componente verrà costruito quando usate un nome di classe.
Come Iniziare a Usare Tailwind CSS
Prima di installare Tailwind CSS e integrarlo nel vostro progetto, assicuratevi che:
- Avete installato Node.js sul vostro computer per usare il gestore di pacchetti Node (npm) nel terminale.
- Il progetto è impostato e avete creato i file necessari.
Questa è la struttura del nostro progetto al momento:
-Tailwind-tutorial
-public
-index.html
-styles.css
-src
-styles.cssSuccessivamente, avviate il terminal per il vostro progetto ed eseguite i seguenti comandi:
npm install -D tailwindcssIl comando precedente installerà il framework Tailwind CSS come dipendenza. Successivamente, generate il vostre file tailwind.config.js eseguendo il comando qui sotto:
npm install -D tailwindcssIl file tailwind.config.js sarà vuoto al momento della creazione, quindi dobbiamo aggiungere alcune righe di codice:
module.exports = {
content: ["./src/**/*.{html,js}", "./public/*.html"],
theme: {
extend: {},
},
plugins: [],
};I percorsi dei file forniti nell’array dei contenuti permetteranno a Tailwind di eliminare qualsiasi stile inutilizzato durante la compilazione.
La prossima cosa da fare è aggiungere le direttive “@tailwind” al vostro file CSS nella cartella src: qui è dove Tailwind genera tutti i suoi stili di utility predefiniti per voi:
@tailwind base;
@tailwind components;
@tailwind utilities;L’ultima cosa da fare è avviare il processo di compilazione eseguendo questo comando nel vostro terminale:
npx tailwindcss -i ./src/styles.css -o ./public/styles.css --watchNel codice qui sopra, stiamo dicendo a Tailwind che il nostro file di input è il foglio di stile nella cartella src e che qualsiasi stile abbiamo usato deve essere costruito nel file di output nella cartella public. --watch permette a Tailwind di osservare il vostro file per le modifiche per un processo di compilazione automatica; ometterlo significa che dobbiamo eseguire lo script ogni volta che vogliamo costruire il nostro codice e vedere l’output desiderato.
Usare Tailwind CSS
Ora che abbiamo installato e impostato Tailwind CSS per il nostro progetto, vediamo alcuni esempi per comprendere appieno la sua applicazione.
Esempio Flexbox
Per usare flex in Tailwind CSS, dovete aggiungere una classe di flex e poi la direzione degli elementi flex:
<div class="flex flex-row">
<button> Button 1 </button>
<button> Button 2 </button>
<button> Button 3 </button>
</div>
Usando flex-row-reverse invertirete l’ordine di apparizione dei pulsanti.
flex-col li impila uno sopra l’altro. Ecco un esempio:
<div class="flex flex-col">
<button> Button 1 </button>
<button> Button 2 </button>
<button> Button 3 </button>
</div>
Proprio come l’esempio precedente, flex-col-reverse inverte l’ordine.
Esempio di Griglia
Quando si specificano le colonne e le righe nel sistema a griglia, si adotta un approccio diverso passando un numero che determinerà come gli elementi occuperanno lo spazio disponibile:
<div class="grid grid-cols-3">
<button> Button 1 </button>
<button> Button 2 </button>
<button> Button 3 </button>
<button> Button 4 </button>
<button> Button 5 </button>
<button> Button 6 </button>
</div>
Colori
Tailwind include molti colori predefiniti. Ogni colore ha una serie di variazioni diverse, con la variazione più chiara a 50 e la più scura a 900.
Ecco un’immagine di più colori e i loro codici esadecimali HTML che illustrano questo aspetto:
Faremo un esempio di come potete farlo usando il colore rosso qui sopra per dare un colore di sfondo a un elemento pulsante:
<button class="bg-red-50">Click me</button>
<button class="bg-red-100">Click me</button>
<button class="bg-red-200">Click me</button>
<button class="bg-red-300">Click me</button>
<button class="bg-red-400">Click me</button>
<button class="bg-red-500">Click me</button>
<button class="bg-red-600">Click me</button>
<button class="bg-red-700">Click me</button>
<button class="bg-red-800">Click me</button>
<button class="bg-red-900">Click me</button>Questa sintassi è la stessa per tutti i colori in Tailwind tranne che per il bianco e il nero, che sono scritti allo stesso modo ma senza l’uso di numeri bg-black e bg-white.
Per aggiungere il colore del testo, si usa la classe text-{color}:
<p class="text-yellow-600">Hello World</p>Padding
Tailwind ha già un sistema di progettazione che vi aiuterebbe a mantenere una scala coerente nei vostri progetti. Tutto quello che dovete sapere è la sintassi per applicare ogni utility.
Qui di seguito alcune utility per aggiungere il padding ai vostri elementi:
pdenota il padding su tutto l’elemento.pydenota padding-top e padding-bottom.pxdenota padding-left e padding-right.ptdenota padding-top.prdenota padding-righ.pbdenota padding-bottom.pldenota padding-left
Per applicarle ai vostri elementi, dovreste usare i numeri appropriati forniti da Tailwind, in modo simile ai numeri che rappresentavano le varianti di colore nell’ultima sezione. Ecco cosa intendiamo:
<button class="p-0">Click me</button>
<button class="pt-1">Click me</button>
<button class="pr-2">Click me</button>
<button class="pb-3">Click me</button>
<button class="pl-4">Click me</button>Margine
Le utility predefinite per il padding e il margine sono molto simili. Dovete sostituire la p con una m:
mmymxmtmrmbml
Come Creare un Plugin Tailwind CSS
Anche se Tailwind CSS ha un sacco di utility e sistemi di progettazione già costruiti, è ancora possibile che ci sia una particolare funzionalità che vi piacerebbe aggiungere per estendere gli usi di Tailwind. Tailwind CSS ci permette di farlo creando un plugin.
Sporchiamoci le mani creando un plugin che aggiunge il color verde acqua e una utility di rotazione che ruota un elemento di 150º sull’asse X. Creeremo queste utility nel file tailwind.config.js usando un po’ di JavaScript.
const plugin = require("tailwindcss/plugin");
module.exports = {
content: ["./src/**/*.{html,js}", "./public/*.html"],
theme: {
extend: {},
},
plugins: [
plugin(function ({ addUtilities }) {
const myUtilities = {
".bg-aqua": { background: "aqua" },
".rotate-150deg": {
transform: "rotateX(150deg)",
},
};
addUtilities(myUtilities);
}),
],
};Ora, scomponiamo il tutto. La prima cosa che abbiamo fatto è stata importare la funzione plugin di Tailwind:
const plugin = require("tailwindcss/plugin");Poi siamo andati a creare i nostri plugin nell’array dei plugin:
plugins: [
plugin(function ({ addUtilities }) {
const newUtilities = {
".bg-aqua": { background: "aqua" },
".rotate-150deg": {
transform: "rotateX(150deg)",
},
};
addUtilities(newUtilities);
}),
],Potreste dover rieseguire lo script di compilazione dopo aver creato il vostro plugin.
Ora che i plugin sono pronti, possiamo testarli:
<button class="bg-aqua rotate-150deg">Click me</button>Se avete fatto tutto correttamente, dovreste avere un pulsante di colore verde acqua con il testo ruotato a 150º sull’asse X.
Riepilogo
I framework sono un’opzione inestimabile quando si tratta di accelerare il vostro flusso di lavoro. Vi aiutano a costruire pagine web belle e professionali mantenendo la coerenza nel design. Tailwind CSS fornisce molte classi CSS di grande utilità che vi aiutano a migliorare il livello del vostro design e del vostro flusso di sviluppo web.
Questo articolo ci ha insegnato cos’è Tailwind CSS e cosa lo rende un framework. Abbiamo poi dato un’occhiata al processo di installazione e visto alcuni esempi che hanno mostrato come possiamo creare i nostri plugin personalizzati per estendere le funzionalità esistenti.
Se avete seguito fino a questo punto, ora avete una comprensione di base ma solida di come funziona Tailwind. Per migliorare nell’uso di un framework così utile, però, dovete continuare a fare pratica e aumentare la vostra conoscenza dei CSS se non avete già una solida base.
Avete usato Tailwind CSS o un altro framework CSS in passato? Condividete i vostri pensieri nella sezione dei commenti!
Ihechikara Abba
Ihechikara is a software developer and technical writer. He enjoys writing articles on web technologies, programming, and IT-related topics.
Connect with Ihechikara on Twitter.
Lascia un commento