Tailwind CSS — Cheat Sheet

Tag: tailwind, css, utility-first, frontend, design

Livello: intermedio

TL;DR: Framework CSS utility-first che permette di stilare componenti direttamente nel markup HTML, garantendo uno sviluppo rapido e un design system coerente.

Concetti chiave

Utility-first: classi con singola responsabilità (es. flex, pt-4, text-center) applicate direttamente all'HTML.

Nessun cambio di contesto: si stila l'interfaccia senza dover saltare continuamente tra file HTML e CSS.

Design system integrato: spaziature, colori e tipografia sono standardizzati e configurabili tramite tailwind.config.js.

JIT (Just-in-Time) compiler: genera solo il CSS effettivamente utilizzato nel progetto, mantenendo il bundle piccolissimo in produzione.

Responsive design: modificatori breakpoint-based (es. md:flex, lg:p-8) per adattare il layout facilmente da mobile a desktop.

Stati pseudo-classe: modificatori per stati interattivi come hover:bg-blue-500, focus:ring, active:scale-95.

Dark mode: supporto nativo tramite il modificatore dark:, attivabile a livello di sistema operativo o tramite classe CSS.

Direttive custom: @apply per estrarre componenti ricorrenti, @layer per organizzare il CSS (base, components, utilities).

Valori arbitrari: possibilità di usare valori specifici non presenti nel tema usando le parentesi quadre (es. w-[32rem]).

Domande tipiche e risposte pronte

Q: Perché usare Tailwind invece del CSS tradizionale o SASS?R: Perché elimina il problema dei nomi delle classi, riduce drasticamente il CSS inutilizzato e velocizza lo sviluppo mantenendo stili coerenti.

Q: Come eviti che l'HTML diventi illeggibile con decine di classi?R: Estraggo i componenti ricorrenti a livello di framework (React, Vue, Blade) o uso @apply solo se il componente non ha logica ma solo stile.

Q: Come funziona l'ottimizzazione per la produzione?R: Tailwind usa il compiler JIT per analizzare i file indicati nel content ed estrarre e generare solo le classi effettivamente presenti.

Q: Come gestisci la personalizzazione del design system?R: Estendo il tema predefinito usando la sezione theme.extend in tailwind.config.js per aggiungere colori, font o breakpoint custom.

Insidie e errori comuni

Usare la concatenazione dinamica delle stringhe per generare classi (es. bg-${color}-500), che impedisce al compiler di trovarle e includerle.

Abusare di @apply per ricreare file CSS tradizionali, perdendo i vantaggi dell'approccio utility-first.

Dimenticare di configurare correttamente i percorsi in content dentro tailwind.config.js, risultando in stili mancanti.

Sovrascrivere completamente il tema base anziché estenderlo in theme.extend, perdendo l'accesso alla palette di default.

Snippet e comandi

# Inizializzazione rapida di Tailwind in un progetto
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

CSS

/* global.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .btn-primary {
    @apply px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition;
  }
}

HTML

<!-- Componente card responsive -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 p-6">
  <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-4 hover:shadow-lg transition">
    <h2 class="text-lg font-bold text-gray-900 dark:text-white">Titolo Card</h2>
    <p class="text-sm text-gray-500 mt-2">Contenuto descrittivo breve.</p>
  </div>
</div>

Da ripassare

[ ] Configurazione dei plugin ufficiali (typography, forms, aspect-ratio).

[ ] Utilizzo avanzato dei container queries (@tailwindcss/container-queries).

[ ] Aggiunta di keyframes e animazioni personalizzate nel file di configurazione.

Riferimenti

Documentazione ufficiale: tailwindcss.com

Tailwind UI (per reference visuale e pattern)

Jarvis Interviews
Jarvis