Un approccio opposto ai framework CSS
I framework CSS dominanti nel 2017 — Bootstrap, Foundation, Bulma — condividono la stessa filosofia: forniscono componenti predefiniti (bottoni, card, navbar, form) con stili già definiti. Lo sviluppatore assembla l’interfaccia selezionando componenti e personalizzandoli dove necessario. Il risultato è produttività immediata, ma anche interfacce che tendono ad assomigliarsi e complessità crescente quando si vuole deviare dall’estetica predefinita.
Tailwind CSS, creato da Adam Wathan, propone un approccio radicalmente diverso: invece di componenti pronti, fornisce una collezione di classi utility atomiche — ciascuna responsabile di una singola proprietà CSS. Non ci sono componenti .btn o .card: ci sono classi come flex, p-4, text-lg, bg-blue-500, rounded-md, composte direttamente nel markup HTML.
Composizione nel markup
Con Tailwind, lo stile di un elemento è leggibile direttamente nel template. Un bottone non è <button class="btn btn-primary"> ma <button class="bg-blue-500 text-white font-bold py-2 px-4 rounded">. La differenza è filosofica: il primo approccio nasconde le decisioni stilistiche dietro un’astrazione, il secondo le rende esplicite.
I critici obiettano che l’HTML diventa verboso e che si mescola struttura e presentazione. I sostenitori rispondono che la co-locazione di stile e markup elimina il problema dei “CSS morti” — classi definite in fogli di stile che nessuno sa più se sono usate — e rende ogni componente autocontenuto.
Configurazione e design system
Il file di configurazione tailwind.config.js definisce il design system: palette colori, spaziature, breakpoint responsive, tipografia, ombre. Ogni valore usato nelle utility class deriva dalla configurazione, garantendo coerenza visiva. Modificare il colore primario o lo scale delle spaziature richiede un’unica modifica al file di configurazione, non una ricerca in tutti i fogli di stile.
Le varianti responsive (md:flex, lg:text-xl) e di stato (hover:bg-blue-700, focus:ring-2) applicano stili condizionali senza media query manuali.
PurgeCSS e produzione
Il framework genera migliaia di classi utility, ma in produzione solo una piccola percentuale viene effettivamente usata. PurgeCSS analizza il markup, identifica le classi effettivamente utilizzate e rimuove tutto il resto dal CSS finale. Il risultato è un foglio di stile di pochi kilobyte. Tailwind CSS è rilasciato sotto licenza MIT.
Link: tailwindcss.com