Come utilizzare Tailwind CSS per creare velocemente siti web eleganti

Man mano che la vostra carriera da sviluppatori avanza, è probabile che cominciate ad utilizzare tecnologie che permettono di fare di più scrivendo meno codice. Un solido framework frontend come Tailwind CSS è una di queste.

In questo articolo, presenteremo Tailwind CSS, un framework CSS che permette di creare pagine web. Inizieremo spiegando come installare e integrare Tailwind CSS in un progetto, vedremo alcune applicazioni pratiche e anche come creare stili e plugin personalizzati.

Cominciamo!

Ecco la nostra video guida su come usare Tailwind CSS per sviluppare siti web:

Cos’è Tailwind CSS?

Tailwind CSS è un framework CSS (Cascading Style Sheets) con classi predefinite che può essere utilizzato per costruire e progettare pagine web direttamente nel markup. Permette di inserire codice CSS all’interno dell’HTML utilizzando classi predefinite.

Per capire meglio cosa sia Tailwind CSS, spieghiamo cos’è un framework e chiariamo cosa si intende con “utility-first 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 di un framework è quello di snellire il lavoro di sviluppo.

Tailwind CSS è uno strumento basato 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 con funzionalità predefinite nel nostro markup (HTML). Questo vuol dire che basta scrivere una classe a cui sono collegati stili predefiniti e quegli stili verranno applicati all’elemento.

Lavorando con vanilla CSS (cioè CSS senza alcun framework o libreria), bisognerebbe prima dare ad un elemento un nome di classe e poi assegnare diverse proprietà a quella classe, che, a sua volta, applicherà lo stile all’elemento.

Vediamo 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 con vanilla CSS e poi con le classi di utility disponibili in Tailwind CSS.

Con Vanilla CSS

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

Abbiamo assegnato al tag del pulsanti la classe btn, cui saranno assegnati gli stili 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 text-white 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 da verificare. Eccone alcuni:

• Buona conoscenza di HTML, della sua struttura e del funzionamento
• Solide basi di CSS – media queries, flexbox e sistema a griglia

Dove si può usare Tailwind CSS?

Tailwind CSS può essere utilizzato in progetti web frontend con framework JavaScript come React.js, Next.js, Laravel, Vite, Gatsby, ecc.

Pro e contro di Tailwind CSS

Ecco alcuni dei vantaggi di Tailwind CSS:

1. Favorisce un processo di sviluppo più veloce
2. Aiuta a far pratica con i CSS perché le utility sono simili
3. Tutte le utility e i componenti sono facilmente personalizzabili
4. La dimensione complessiva del file per la produzione è solitamente piccola
5. Si impara ad usare facilmente se si conosce già CSS
6. Dispone di una buona documentazione

Alcuni degli svantaggi di Tailwind CSS:

1. Il markup potrebbe sembrare disorganizzato per grandi progetti perché tutti gli stili si trovano nei file HTML.
2. Non è facile da imparare se non si conosce bene il CSS.
3. Obbliga a costruire tutto da zero, compresi gli elementi di input. Quando si installa Tailwind CSS, tutti gli stili CSS predefiniti vengono rimossi.
4. Tailwind CSS non è la soluzione migliore se si sta cercando di ridurre al minimo il tempo speso per sviluppare il frontend del sito e si vuole concentrarsi principalmente sulla logica del backend.

Quando usare Tailwind CSS

Tailwind CSS viene utilizzato per snellire il processo di sviluppo scrivendo meno codice. Include un sistema di progettazione che aiuta a mantenere la coerenza tra i vari elementi di progettazione come il padding, la spaziatura e così via; con questo, non bisogna preoccuparvi di creare i propri sistemi di progettazione.

È possibile utilizzare Tailwind CSS anche se si sta cercando un framework che sia facilmente configurabile perché non costringe a usare i componenti (barre di navigazione, pulsanti, moduli e così via) sempre allo stesso modo; si può scegliere come devono essere i componenti. Ma non bisognerebbe mai usare Tailwind se non si è pratici dei CSS.

Somiglianze e differenze tra Tailwind CSS e altri framework CSS

Ecco alcune somiglianze:

1. Permettono di lavorare più velocemente.
2. Sono dotati di classi predefinite.
3. Sono stati costruiti su regole CSS.
4. Sono facili da usare con una conoscenza pratica dei CSS.

Queste sono alcune delle differenze:

1. Tailwind CSS è diverso dalla maggior parte dei framework perché è necessario creare i propri componenti. Per esempio, Bootstrap ha componenti come barre di navigazione, pulsanti e così via, ma con Tailwind bisogna costruire tutto in autonomia.
2. Alcuni framework come Bootstrap non sono facilmente personalizzabili, quindi si è costretti ad utilizzare i rispettivi design pattern. In Tailwind, è l’utente a controllare il flusso di tutto.
3. Per utilizzare Tailwind, è richiesta una conoscenza approfondita dei CSS. Scrivere i nomi delle classi non è sufficiente perché bisogna combinarli come se si stesse scrivendo vanilla CSS per ottenere lo stesso risultato. Tutto quello che bisogna sapere per la maggior parte degli altri framework è quale componente verrà costruito quando si usa un nome di classe.

Come iniziare a utilizzare Tailwind CSS

Prima di installare Tailwind CSS e integrarlo in un progetto, è necessario assicurarsi che:

1. Si è installato Node.js sul proprio computer per usare il gestore di pacchetti Node (npm) nel terminale.
2. Il progetto è impostato e sono stati creati i file necessari.

Questa è la struttura del nostro progetto al momento:

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

Avviamo il terminale per il vostro progetto ed eseguiamo questi comandi:

npm install -D tailwindcss

Il comando precedente installerà il framework Tailwind CSS come dipendenza. Quindi generiamo il file tailwind.config.js eseguendo il questo comando:

npx tailwindcss init

Al momento della creazione, il file tailwind.config.js sarà vuoto, 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 stili inutilizzati durante la build.

Bisognerà quindi aggiungere le direttive “@tailwind” al file CSS nella cartella src: qui Tailwind genera tutti i suoi stili di utility predefiniti:

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

L’ultima cosa da fare è avviare il processo di build eseguendo questo comando nel vostro terminale:

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

Nel codice qui sopra, diciamo a Tailwind che il nostro file di input è il foglio di stile presente nella cartella src e che tutti gli stili che abbiamo utilizzato devono essere nel file di output nella cartella public. --watch permette a Tailwind di osservare le modifiche al file per la build automatica; omettendolo, per vedere l’output desiderato, dovremo eseguire lo script ogni volta che lanciamo la build.

Usare Tailwind CSS

Ora che abbiamo installato e configurato Tailwind CSS per il nostro progetto, vediamone alcuni esempi.

Esempio Flexbox

Per usare flex in Tailwind CSS, bisogna aggiungere una classe flex e poi la direzione degli elementi:

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

Con flex-row-reverse si inverte l’ordine di apparizione dei pulsanti.

flex-col li dispone 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 nell’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. Si passa un numero che determinerà il modo in cui 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 dispone di 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 rispettivi codici esadecimali HTML:

Vediamo un esempio 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 permette di mantenere una scala coerente nei progetti. Tutto quello che bisogna conoscere è la sintassi necessaria per applicare le utility.

Qui di seguito alcune utility per aggiungere il padding agli elementi:

• p denota il padding su tutto l’elemento.
• py denota padding-top e padding-bottom.
• px denota padding-left e padding-right.
• pt denota padding-top.
• pr denota padding-righ.
• pb denota padding-bottom.
• pl denota padding-left

Per applicare queste utility agli elementi, è necessario assegnare i valori appropriati forniti da Tailwind, in modo simile ai numeri che rappresentano le varianti di colore mostrati nell’ultima sezione:

<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. Basta sostituire la p con una m:

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

Come creare un plugin Tailwind CSS

Anche se Tailwind CSS ha un sacco di utility e sistemi di progettazione predefiniti, è sempre possibile che ci sia una particolare funzionalità che si vorrebbe aggiungere per estenderne l’uso. Tailwind CSS 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 utilizzando 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);
    }),
  ],

Potrebbe essere necessario rieseguire lo script di build dopo aver creato il plugin.

Ora che i plugin sono pronti, possiamo testarli:

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

Se abbiamo fatto tutto correttamente, dovremmo avere un pulsante di colore verde acqua con il testo ruotato a 150º sull’asse X.

Riepilogo

I framework sono strumenti preziosi per snellire il flusso di lavoro. Permettono di creare pagine web accattivanti e professionali, mantenendo la coerenza del design. Tailwind CSS fornisce molte classi CSS di utility che permettono di migliorare il lavoro si design e sviluppo web.

In questo articolo abbiamo visto cos’è Tailwind CSS e cosa lo rende un framework. Abbiamo dato un’occhiata all’installazione e visto alcuni esempi in cui abbiamo mostrato come creare plugin personalizzati per estendere le funzionalità esistenti.

Se avete seguito fino a questo punto, dovreste avere una comprensione di base ma solida del funzionamento di Tailwind. Per continuare e migliorare nell’uso del framework, però, bisogna continuare a fare pratica e consolidare le competenze sui CSS, se non se ne ha una buona conoscenza.

Avete usato Tailwind CSS o un altro framework CSS? Condividete le vostre esperienze nella sezione dei commenti!

Ihechikara Abba

Ihechikara è uno software developer e technical writer. Si diverte a scrivere articoli su tecnologie web, programmazione e argomenti legati all'IT. Collegatevi con Ihechikara su X.