Tailwind CSS · Marco Consiglio

🗺️ Utility-first — nessun componente predefinito, solo mattoncini

Tailwind è radicalmente diverso da Bootstrap/Materialize/Pure: NON fornisce componenti pronti come navbar o card, ma centinaia di classi atomiche (una proprietà CSS per classe) da comporre direttamente nell'HTML per costruire qualsiasi design personalizzato.

Questo è l'opposto filosofico di Bootstrap: invece di "usa questo componente già pronto", Tailwind dice "componi lo stile che vuoi, pezzo per pezzo" — più flessibilità, ma richiede scrivere più classi per ottenere lo stesso risultato visivo.

⚙️ Due modalità di setup: CDN (play) vs build (produzione)

// MODALITÀ 1: CDN Play — per prototipare rapidamente, sconsigliata in produzione <script src="https://cdn.tailwindcss.com"></script>

⚠️ Il CDN Play genera TUTTE le classi Tailwind al volo via JavaScript nel browser — comodo per prototipi didattici, ma sconsigliato in produzione: genera un file enorme scaricato ad ogni visita, invece del CSS ottimizzato del metodo build.

// MODALITÀ 2: Build via npm — per progetti reali npm install -D tailwindcss npx tailwindcss init // tailwind.config.js: specifica quali file scansionare module.exports = { content: ["./src/**/*.html"], // ... } // comando che genera il CSS finale, contenente SOLO le classi effettivamente usate npx tailwindcss -i input.css -o output.css

💡 Il metodo build "scansiona" i file HTML/JS elencati in content e genera un CSS finale con SOLO le classi effettivamente utilizzate nel progetto (tecnica chiamata "purging") — risultato: un file CSS finale molto più piccolo del CDN Play, che include invece tutto.

🧱 Classi atomiche — una proprietà CSS per classe

<button class="bg-blue-600 text-white font-bold py-2 px-4 rounded-lg"> Pulsante </button>

Anteprima

Pulsante

Classe	Proprietà CSS equivalente
`bg-blue-600`	background-color: (blu, tonalità 600 su scala 50-950)
`text-white`	color: white
`py-2`	padding-top/bottom: 0.5rem
`px-4`	padding-left/right: 1rem
`rounded-lg`	border-radius: 0.5rem

⚠️ A differenza di Bootstrap dove una classe come card applica MOLTE proprietà insieme (padding, bordo, ombra, angoli), ogni classe Tailwind ne applica tipicamente UNA sola: costruire l'equivalente di una "card" Bootstrap richiede comporre 5-8 classi Tailwind diverse sullo stesso elemento.

✅ La scala numerica di colori (es. blue-50 chiarissimo fino a blue-950 scurissimo) è coerente in TUTTA la palette Tailwind — imparare questa scala una volta la rende applicabile a qualsiasi colore del framework.

📱 Responsive variants — prefissi invece di classi separate

A differenza di Bootstrap (dove col-md-6 è una classe a sé), Tailwind usa un prefisso davanti a QUALSIASI classe per applicarla solo da un certo breakpoint in su.

<div class="text-sm md:text-lg lg:text-xl"> Testo che cresce con lo schermo </div> <div class="flex flex-col md:flex-row"> // impilato su mobile, affiancato da tablet in su </div>

Prefisso	Larghezza minima
(nessuno)	0px (mobile-first, sempre attivo come base)
`sm:`	640px
`md:`	768px
`lg:`	1024px
`xl:`	1280px

💡 QUALSIASI classe Tailwind può ricevere un prefisso responsive, non solo quelle di layout: md:text-lg, lg:bg-red-500, sm:hidden sono tutte valide — una flessibilità maggiore rispetto alle classi predefinite col-md-* di Bootstrap, limitate al solo sistema di grid.

🌙 Dark mode — prefisso dark: applicato selettivamente

<div class="bg-white text-black dark:bg-gray-900 dark:text-white"> Sfondo chiaro di default, scuro in dark mode </div>

Anteprima (versione dark)

Sfondo scuro con testo chiaro — dark:bg-gray-900 dark:text-white

💡 dark: è concettualmente identico ai prefissi responsive (md:, lg:): si applica quando è attiva una condizione (qui: preferenza dark mode del sistema operativo, o una classe dark aggiunta manualmente all'<html>) invece di un breakpoint di larghezza.

🎛️ Configurazione — personalizzare colori e valori nel tailwind.config.js

// tailwind.config.js module.exports = { content: ["./src/**/*.html"], theme: { extend: { colors: { 'brand': '#C9A24B', // aggiunge un colore custom senza rimuovere quelli predefiniti }, spacing: { '128': '32rem', // aggiunge un nuovo valore alla scala di spacing } } } }

// il nuovo colore diventa immediatamente utilizzabile come classe: <div class="bg-brand text-white">Sfondo personalizzato</div>

⚠️ extend AGGIUNGE ai valori predefiniti senza sostituirli; scrivere le proprietà direttamente dentro theme (senza extend) SOSTITUISCE completamente i valori predefiniti — un errore comune è dimenticare extend e perdere accidentalmente tutta la palette colori standard di Tailwind.

🧩 Applicazioni tipiche

Tipologia	Uso tipico
Design system personalizzato	Progetti dove il brand richiede un'estetica unica, non riconducibile a Bootstrap/Materialize
Applicazioni React/Vue	Ampiamente usato insieme a framework JavaScript component-based, dove le classi Tailwind vivono dentro i componenti
Prototipazione rapida con CDN Play	Demo e mockup veloci, da NON portare in produzione così come sono
Progetti con dark mode nativa	App dove la modalità scura è un requisito fin dall'inizio del design

🎓 Esercitazioni pratiche

Costruisci una "card" solo con classi atomiche

Usando il CDN Play, componi un elemento con bordo, angoli arrotondati, ombra e padding che replichi visivamente una card Bootstrap, usando solo classi Tailwind (border, rounded-lg, shadow-md, p-4).

⏱ 25 min📦 1 file HTML💻 Individuale

Layout responsive con prefissi

Crea una sezione con testo che cambia dimensione (text-sm md:text-base lg:text-lg) e un contenitore che passa da colonna a riga (flex-col md:flex-row) a seconda del breakpoint.

⏱ 20 min📦 1 file HTML💻 Individuale

Sezione con supporto dark mode

Costruisci una piccola pagina con classi dark: per sfondo, testo e bordi, e verifica il cambio visivo attivando la modalità scura del sistema operativo o del browser.

⏱ 20 min📦 1 file HTML💻 Individuale

Tailwind CSS — Utility-First Framework

Report Quiz

🎓 Attestato di Competenze sbloccato!