FL
Torna agli strumentiTailwind CSS

Sviluppo

Tailwind CSS

CSS utility-first per design system coerenti.

Tailwind CSS è il framework utility-first che uso per costruire interfacce coerenti e rapide: invece di scrivere fogli di stile separati, la classe descrive l'aspetto direttamente nel markup. Dalla versione 4 la configurazione vive nel CSS stesso, quindi la palette e la tipografia stanno in un unico punto invece che in un file JavaScript a parte. È la base estetica di questo sito.

Perché lo uso

Nessun runtime JavaScript: il CSS viene generato in fase di build, quindi il browser non paga nulla a runtime. In produzione resta solo quello che viene davvero usato, e i token centralizzati impediscono la deriva di colori e spaziature che si accumula nei progetti che crescono.

Cosa uso, nel dettaglio

Configurazione in CSS (@theme)

tailwindcss.com

In v4 non esiste più il file tailwind.config.js: questo sito non ne ha uno. Il blocco @theme dentro il foglio di stile globale definisce tutto, e le variabili restano leggibili come normali custom property CSS anche fuori da Tailwind.

Token di colore e tipografia

Dodici token di colore — la scala carta/inchiostro più l'accento in tre intensità — e quattro famiglie tipografiche. Le sfumature nascono da lì, quindi cambiare l'accento del sito significa toccare una riga sola.

Utility pure, zero @apply

Nessuna direttiva @apply in tutto il progetto: le classi restano nel markup invece di essere raccolte in classi custom. Costa un po' di verbosità, ma elimina il livello intermedio in cui non si sa più se uno stile arrivi dall'utility o dal CSS scritto a mano.

Risorse

Sviluppo

FLFrancesco Lossi