Come utilizzare Tailwind CSS per sviluppare rapidamente siti Web accattivanti

Man mano che avanzi come sviluppatore, è più probabile che utilizzi tecnologie che ti 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 nella creazione e nella progettazione di pagine Web. Inizieremo spiegando come installare e integrare Tailwind CSS nel tuo progetto, vedere alcune applicazioni pratiche e anche come creare stili e plugin personalizzati.

Emozionato? Cominciamo!

Cos'è Tailwind CSS?

Tailwind CSS è un framework CSS (Cascading Style Sheets) di utilità con classi predefinite che puoi utilizzare per creare e progettare pagine Web direttamente nel tuo markup. Ti consente di scrivere CSS nel tuo HTML sotto forma di classi predefinite.

Definiremo cos'è un framework e cosa intendiamo per "utility-first CSS" per aiutarti a capire meglio di cosa tratta Tailwind CSS.

Che cos'è un quadro?

Come termine di programmazione generale, un framework è uno strumento che fornisce componenti riutilizzabili e già pronti costruiti dalle caratteristiche di uno strumento già esistente. Lo scopo generale della creazione di framework è aumentare la velocità di sviluppo facendo meno lavoro.

Ora che abbiamo stabilito il significato di un framework, dovrebbe aiutarti a capire che Tailwind CSS è uno strumento basato sulle funzionalità CSS. Tutte le funzionalità del framework sono state derivate da stili CSS composti come classi.

Che cos'è un framework CSS di utilità?

Quando diciamo CSS utility-first, ci riferiamo a classi nel nostro markup (HTML) con funzionalità predefinite. Ciò implica che devi solo scrivere una classe con stili predefiniti allegati e quegli stili verranno applicati all'elemento.

In un caso in cui stai lavorando con vanilla CSS (CSS senza alcun framework o libreria), dovresti prima assegnare al tuo elemento un nome di classe e quindi allegare proprietà e valori diversi a quella classe, che a sua volta applicherà lo stile al tuo elemento .

Ti mostreremo un esempio. Qui creeremo un pulsante con angoli arrotondati e un testo che dice "Fai clic su di me". Ecco come apparirà il pulsante:

Lo faremo prima usando il CSS vanilla, quindi usando le classi di utilità disponibili in Tailwind CSS.

Con CSS alla vaniglia

 <button class="btn">Click me</button>

Abbiamo assegnato ai tag dei pulsanti la classe btn , a cui verrà applicato uno stile utilizzando un foglio di stile esterno. Questo è:

 .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 ciò è necessario per ottenere lo stesso effetto dell'esempio con i CSS vanilla. Non è stato creato alcun foglio di stile esterno in cui devi scrivere gli stili perché ogni nome di classe che abbiamo usato ha già uno stile predefinito.

Prerequisiti per l'utilizzo di Tailwind CSS

Prima di utilizzare Tailwind CSS, ci sono alcuni prerequisiti che dovresti considerare di soddisfare per utilizzare le funzionalità del framework senza difficoltà. Eccone alcuni:

• Buona conoscenza dell'HTML, della sua struttura e del suo funzionamento
• Solide basi in CSS: media query, flexbox e sistema a griglia

Dove può essere utilizzato Tailwind CSS?

Puoi utilizzare 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:

1. Processo di sviluppo più veloce
2. Ti aiuta a esercitarti maggiormente con i CSS poiché le utilità sono simili
3. Tutte le utilità e i componenti sono facilmente personalizzabili
4. La dimensione complessiva del file per la produzione è generalmente piccola
5. Facile da imparare se conosci già i CSS
6. Buona documentazione per l'apprendimento

Alcuni degli svantaggi dell'utilizzo di Tailwind CSS includono:

1. Il tuo markup potrebbe sembrare disorganizzato per progetti di grandi dimensioni perché tutti gli stili sono nei file HTML.
2. Non è facile da imparare se non capisci bene i CSS.
3. Sei costretto a costruire tutto da zero, inclusi i tuoi elementi di input. Quando installi Tailwind CSS, rimuove tutti gli stili CSS predefiniti.
4. Tailwind CSS non è l'opzione migliore se stai cercando di ridurre al minimo il tempo dedicato allo sviluppo del frontend del tuo sito Web e concentrarti principalmente sulla logica del backend.

Quando utilizzare Tailwind CSS

Tailwind CSS è meglio utilizzato per accelerare il processo di sviluppo scrivendo meno codice. Viene fornito con un sistema di progettazione che aiuta a mantenere la coerenza tra i vari requisiti di progettazione come riempimento, spaziatura e così via; con questo, non devi preoccuparti di creare i tuoi sistemi di progettazione.

Puoi anche utilizzare Tailwind CSS se stai cercando di utilizzare un framework facilmente configurabile perché non ti obbliga a utilizzare i componenti (barre di navigazione, pulsanti, moduli e così via) nello stesso modo tutto il tempo; puoi scegliere come dovrebbero apparire i tuoi componenti. Ma non dovresti mai usare Tailwind se non hai imparato e praticato i CSS.

Somiglianze e differenze tra Tailwind CSS e altri framework CSS

Ecco alcune somiglianze:

1. Ti aiutano a portare a termine il lavoro più velocemente.
2. Vengono con classi predefinite.
3. Sono stati costruiti su regole CSS.
4. Sono entrambi facili da imparare e da usare con una conoscenza pratica dei CSS.

Ora diamo un'occhiata ad alcune delle differenze:

1. Tailwind è diverso dalla maggior parte dei framework perché devi creare i tuoi componenti. Ad esempio, Bootstrap ha componenti come barre di navigazione, pulsanti e così via, ma con Tailwind devi costruirlo da solo.
2. Alcuni framework come Bootstrap non sono facilmente personalizzabili, quindi sei costretto a utilizzare i loro modelli di progettazione. In Tailwind, controlli il flusso di tutto.
3. Per utilizzare Tailwind è richiesta una conoscenza approfondita dei CSS. Scrivere i nomi delle classi non è sufficiente, poiché devi combinarli come se stessi scrivendo CSS vanilla per ottenere lo stesso risultato. Tutto ciò che devi sapere nella maggior parte degli altri framework è quale componente verrà creato quando usi un nome di classe.

Come iniziare a utilizzare Tailwind CSS

Prima di installare Tailwind CSS e integrarlo nel tuo progetto, assicurati che:

1. Hai Node.js installato sul tuo computer per utilizzare il gestore di pacchetti Node (npm) nel terminale.
2. Il tuo progetto è tutto impostato con i tuoi file creati.

Ecco come si presenta al momento la nostra struttura di progetto:

 -Tailwind-tutorial -public -index.html -styles.css -src -styles.css

Quindi, avvia un terminale per il tuo progetto ed esegui i seguenti comandi:

 npm install -D tailwindcss

Il comando precedente installerà il framework Tailwind CSS come dipendenza. Quindi, genera il tuo file tailwind.config.js eseguendo il comando seguente:

 npm install -D tailwindcss

Il 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 di contenuto consentiranno a Tailwind di eliminare/rimuovere gli stili inutilizzati durante la fase di compilazione.

La prossima cosa da fare è aggiungere le direttive "@tailwind" al tuo file CSS nella cartella src : è qui che Tailwind genera tutti i suoi stili di utilità predefiniti per te:

 @tailwind base; @tailwind components; @tailwind utilities;

L'ultima cosa da fare è avviare il processo di compilazione eseguendo questo comando nel terminale:

 npx tailwindcss -i ./src/styles.css -o ./public/styles.css --watch

Nel codice sopra, stiamo dicendo a Tailwind che il nostro file di input è il foglio di stile nella cartella src e che qualsiasi stile che abbiamo usato deve essere integrato nel file di output nella cartella pubblica. --watch consente a Tailwind di controllare il tuo file per le modifiche per un processo di compilazione automatico; ometterlo significa che dobbiamo eseguire quello script ogni volta che vogliamo costruire il nostro codice e vedere l'output desiderato.

Utilizzo di Tailwind CSS

Ora che abbiamo installato e configurato Tailwind CSS per il nostro progetto, vediamo alcuni esempi per comprendere appieno la sua applicazione.

Esempio di Flexbox

Per utilizzare flex in Tailwind CSS, devi aggiungere una classe di flex e quindi la direzione degli elementi flex:

 <div class="flex flex-row"> <button> Button 1 </button> <button> Button 2 </button> <button> Button 3 </button> </div>

L'uso flex-row-reverse invertirà l'ordine in cui appaiono i 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 colonne e righe nel sistema della griglia, adottiamo 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 viene fornito con molti colori predefiniti. Ogni colore ha una serie di variazioni diverse, con la variazione più chiara 50 e la più scura 900.

Ecco un'immagine di più colori e dei loro codici esadecimali HTML per illustrare questo

Daremo un esempio di come puoi farlo usando il colore rosso sopra per dare a un elemento pulsante un colore di sfondo:

 <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 ad eccezione del bianco e nero, che sono scritti allo stesso modo ma senza l'uso di numeri: bg-black e bg-white .

Per aggiungere il colore del testo, usi la classe text-{color} :

 <p class="text-yellow-600">Hello World</p>

Imbottitura

Tailwind ha già un sistema di progettazione che ti aiuterebbe a mantenere una scala coerente tra i tuoi progetti. Tutto quello che devi sapere è la sintassi per applicare ciascuna utilità.

Le seguenti sono utilità per aggiungere padding ai tuoi elementi:

• p indica il riempimento su tutto l'elemento.
• py indica padding-top e padding-bottom.
• px indica padding-left e padding-right.
• pt denota imbottitura-top.
• pr indica il riempimento a destra.
• pb indica il riempimento inferiore.
• pl indica il riempimento a sinistra

Per applicarli ai tuoi elementi, dovresti usare i numeri appropriati forniti da Tailwind, un po' simili 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 utilità predefinite per il riempimento e il margine sono molto simili. Devi sostituire p con una m :

• m
• my
• mx
• mt
• mr
• mb
• ml

Come creare un plug-in CSS di Tailwind

Anche se Tailwind CSS ha un sacco di utilità e sistemi di progettazione già creati per te, è comunque possibile che tu abbia una funzionalità particolare che vorresti aggiungere per estendere ciò per cui Tailwind può essere utilizzato. Tailwind CSS ci consente di farlo creando un plugin.

Sporciamoci le mani creando un plugin che aggiunge l'aqua color e un'utilità di rotazione che ruota un elemento di 150 sull'asse X. Realizzeremo queste utilità 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, analizziamolo. La prima cosa che abbiamo fatto è stata importare la funzione del plugin di Tailwind:

 const plugin = require("tailwindcss/plugin");

Quindi abbiamo continuato a creare i nostri plug-in nell'array dei plug-in:

 plugins: [ plugin(function ({ addUtilities }) { const newUtilities = { ".bg-aqua": { background: "aqua" }, ".rotate-150deg": { transform: "rotateX(150deg)", }, }; addUtilities(newUtilities); }), ],

Potrebbe essere necessario eseguire nuovamente lo script di compilazione dopo aver creato il plug-in.

Ora che i plugin sono pronti, possiamo testarli:

 <button class="bg-aqua rotate-150deg">Click me</button>

Se hai fatto tutto bene, dovresti avere un pulsante con un colore acqua con il testo ruotato a 150 sull'asse X.

Sommario

I framework sono un'opzione preziosa quando si tratta di accelerare il flusso di lavoro. Ti aiutano a creare pagine Web di bell'aspetto e professionali mantenendo la coerenza nel design. Tailwind CSS fornisce molte classi CSS di utilità per aiutare a portare la progettazione e lo sviluppo web al livello successivo.

Questo articolo ci ha insegnato cos'è Tailwind CSS e cosa lo rende un framework. Abbiamo quindi esaminato il processo di installazione e visto alcuni esempi che hanno mostrato come creare i nostri plug-in personalizzati per estendere le funzionalità esistenti.

Se hai seguito fino a questo punto, ora hai una comprensione di base ma solida di come funziona Tailwind. Per migliorare nell'utilizzo di un tale framework di utilità, tuttavia, devi continuare a esercitarti e aumentare la tua conoscenza dei CSS se non hai già una solida base.

Hai usato Tailwind CSS o un altro framework CSS in passato? Condividi i tuoi pensieri nella sezione commenti!