Cos'è Tailwind CSS? Guida semplice per chi crea app

Tailwind CSS è un toolkit per dare stile ai siti web. Invece di scrivere regole di stile separate in un file a parte, dai a ogni elemento brevi nomi di classe già pronti — bg-white per uno sfondo bianco, p-4 per il padding, text-lg per un testo più grande, rounded-xl per gli angoli arrotondati — e Tailwind produce il CSS di cui il browser ha bisogno. È gratuito, open source e uno dei modi più diffusi per dare stile alle moderne app web.

Perché Tailwind conta quando costruisci con l'AI

Se crei un'app web con un builder AI, c'è una buona probabilità che il suo stile sia realizzato con Tailwind. Mythex, ad esempio, avvia i nuovi progetti su Vite + React + TypeScript + Tailwind a meno che tu non chieda altro (come viene scelta la tecnologia).

Questo ti interessa per tre motivi:

• Le modifiche al design costano poco. Poiché lo stile vive accanto a ogni pulsante, scheda e titolo, l'AI può trasformare «rendi le schede meno affollate» modificando alcune classi in un solo punto.
• Puoi leggerlo. Le classi Tailwind sono vicine all'inglese naturale. text-center font-bold text-2xl non è difficile da decifrare, anche se non hai mai scritto codice.
• L'aspetto resta coerente. Tailwind offre una scala fissa di dimensioni, spaziature e colori. Così un'app non finisce con quattordici grigi leggermente diversi.

Un'analogia quotidiana

Pensa alla vernice e alla costruzione di una casa.

Il CSS normale è come mescolare la tua vernice per ogni parete. Hai piena libertà, ma dopo un po' il soggiorno è «bianco caldo», il corridoio «bianco un po' più caldo» e nessuno ricorda perché.

Tailwind è come una cartella di colori di un negozio di vernici più un set di etichette con nome. Ogni parete ha un'etichetta — «bianco, opaco, due mani» — e la cartella offre solo una selezione curata di tonalità. Perdi un po' di libertà, ma tutti nel cantiere sanno esattamente come deve apparire ogni parete semplicemente leggendo l'etichetta.

Come funziona Tailwind

Una pagina web è costruita con HTML (contenuto e struttura) e CSS (aspetto). Normalmente il CSS vive in un file separato con regole come questa:

.card {
  background: white;
  padding: 1rem;
  border-radius: 0.75rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

Con Tailwind salti la scrittura di quella regola e metti le classi di utilità direttamente sull'elemento:

<div class="bg-white p-4 rounded-xl shadow-sm">
  La tua prenotazione è confermata
</div>

Ogni classe fa un piccolo compito. Quando l'app viene compilata, Tailwind analizza i tuoi file, trova le classi che hai effettivamente usato e genera solo il CSS per quelle. Così il foglio di stile finale resta piccolo.

Tailwind versione 4, la versione principale attuale, si configura con pochissimo lavoro: lo installi, aggiungi il suo plugin allo strumento di build e scrivi @import "tailwindcss"; in cima al file CSS. Le personalizzazioni, come i colori del brand e i font, si definiscono in CSS come token di design, invece che in un grande file di configurazione JavaScript come richiedevano le versioni precedenti. Se leggi un tutorial più vecchio che cita tailwind.config.js, è per questo.

Un esempio concreto: una scheda di prezzo

Immagina di aver chiesto al tuo builder AI una pagina dei prezzi e di voler far risaltare la scheda «Pro». Il codice della scheda potrebbe essere questo (in un componente React, class si scrive className):

<div className="rounded-2xl border border-gray-200 p-6">
  <h3 className="text-lg font-semibold">Pro</h3>
  <p className="mt-2 text-4xl font-bold">25 
lt;/p>
  <button className="mt-6 w-full rounded-lg bg-gray-900 px-4 py-2 text-white">
    Inizia la prova
  </button>
</div>

Leggendolo da sinistra a destra:

Se chiedi «fai risaltare la scheda Pro con un bordo blu e un'ombra sottile», l'AI potrebbe cambiare border-gray-200 in border-2 border-blue-600 e aggiungere shadow-lg. Tutta la modifica è questa.

Design responsive e modalità scura

Tailwind ha prefissi brevi per le dimensioni dello schermo e per gli stati:

• md:grid-cols-3 — tre colonne su schermi medi e più grandi; su un telefono si applica la colonna singola predefinita. Tailwind è mobile-first: le classi senza prefisso valgono ovunque, mentre i prefissi aggiungono modifiche per schermi più grandi.
• hover:bg-gray-700 — un pulsante più scuro quando il mouse ci passa sopra.
• dark:bg-gray-900 — uno sfondo diverso quando la modalità scura è attiva.

Per questo chiedere un layout responsive per mobile o la modalità scura è di solito rapido in un progetto Tailwind.

Termini chiave

Idee sbagliate comuni

• «Tailwind è un design.» Non lo è. Tailwind ti dà blocchi da costruzione, non un aspetto. Due siti Tailwind possono sembrare completamente diversi. Il generico «aspetto da app AI» deriva dai valori predefiniti, non da Tailwind — dai al tuo builder una direzione precisa. Vedi come progettare un'app con l'AI dall'aspetto curato.
• «È come gli stili inline.» Non proprio. Le classi provengono da una scala condivisa, supportano hover, modalità scura e breakpoint, e vengono trasformate in CSS normale in fase di build.
• «Tailwind appesantisce le pagine.» La build include solo le classi che usi, quindi il CSS inviato ai visitatori di solito è piccolo.
• «Liste di classi lunghe significano codice disordinato.» All'inizio sembrano confuse, ma tutto ciò che riguarda l'aspetto di un elemento è in un solo posto. I pattern ripetuti di solito vengono raccolti in componenti, come un unico Button.
• «Se uso Tailwind non posso usare CSS personalizzato.» Puoi sempre scrivere CSS normale quando serve.

Cosa chiedere al tuo builder AI

• «Definisci i colori e i font del brand una sola volta come token del tema, e usali ovunque invece di colori scritti a mano.»
• «Fai in modo che ogni scheda, pulsante e campo di input usi lo stesso raggio degli angoli e la stessa spaziatura.»
• «Controlla il layout alla larghezza di un telefono e sistema ciò che esce dalla pagina o è troppo piccolo per essere toccato.»
• «Aggiungi la modalità scura usando la variante dark: di Tailwind e assicurati che il contrasto del testo resti leggibile.»
• «Raccogli gli stili ripetuti dei pulsanti in un unico componente Button riutilizzabile.»
• «Spiega in parole semplici le classi Tailwind di questa sezione.»

Tailwind in Mythex

I nuovi progetti Mythex usano Tailwind di default insieme a React e TypeScript, così puoi chiedere modifiche visive con parole semplici e vederle nell'anteprima live. Se preferisci vedere il codice, l'editor mostra ogni classe (in sola lettura nel piano Free, modificabile nel piano Pro). Se preferisci CSS normale o un'altra configurazione, dillo nel primo prompt — la documentazione spiega come viene scelto lo stack.

Domande