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?

Homepage di Tailwind CSS con il motto Rapidly Build Modern Websites Without Ever Leaving Your HTML
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:

Un pulsante rettangolare nero con angoli leggermente arrotondati e testo bianco che dice "Click me".
Il nostro 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:

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:

  1. Processo di sviluppo più veloce
  2. Vi aiuta a fare più 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. Facile da imparare se conoscete già i CSS
  6. Buona documentazione per imparare

Alcuni degli svantaggi dell’utilizzo di Tailwind CSS includono:

  1. Il vostro markup potrebbe sembrare disorganizzato per grandi progetti perché tutti gli stili si trovano nei file HTML.
  2. Non è facile da imparare se non conoscete bene il CSS.
  3. Vi obbliga a costruire tutto da zero, compresi i vostri elementi di input. Quando installate Tailwind CSS, tutti gli stili CSS predefiniti vengono rimossi.
  4. 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:

  1. Vi aiutano a lavorare più velocemente.
  2. Sono dotati di 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 guardiamo alcune delle differenze:

  1. 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.
  2. 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.
  3. È 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:

  1. Avete installato Node.js sul vostro computer per usare il gestore di pacchetti Node (npm) nel terminale.
  2. 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.css

Successivamente, avviate il terminal per il vostro progetto ed eseguite i seguenti comandi:

    npm install -D tailwindcss

Il 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 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 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 --watch

Nel 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.

Vuoi fare di più scrivendo meno codice? 👀 Prova ad utilizzare un solido framework frontend come Tailwind CSS 👨‍💻Click to Tweet

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>
Tre pulsanti allineati orizzontalmente che usano la classe di utility flex-row di Tailwind CSS.
I nostri tre pulsanti viola.

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>
Tre pulsanti allineati verticalmente che usano la classe di utility flex-col di Tailwind CSS.
I nostri tre pulsanti viola.

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>
Sei pulsanti distribuiti equamente in colonne che usano la classe di utility grid-cols di Tailwind CSS.
I nostri sei pulsanti viola.

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:

Personalizzazione dei colori dalla tavolozza predefinita di Tailwind.
Personalizzazione dei colori dalla tavolozza predefinita di Tailwind. (Fonte dell’immagine)

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:

  • 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 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:

  • 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 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.

La tua arma segreta per costruire e progettare pagine web? 👀 Tailwind CSS 😌Click to Tweet

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!


Risparmia tempo e costi e massimizza le prestazioni del sito con:

  • Aiuto immediato dagli esperti dell’hosting WordPress, 24/7.
  • Integrazione di Cloudflare Enterprise.
  • Copertura globale del pubblico con 34 data center in tutto il mondo.
  • Ottimizzazione del sito con il nostro Monitoraggio delle Prestazioni delle Applicazioni integrato.

Tutto questo e molto altro, in un piano senza contratti a lungo termine, con migrazioni assistite e una garanzia di 30 giorni di rimborso. Scopri i nostri piani o contattaci per trovare il piano che fa per te.