Colori di sfondo in TailwindCSS

GCGiuseppe Crescitelli

Introduzione ai colori di sfondo

In TailwindCSS i colori di sfondo vengono gestiti tramite utility class che permettono di applicare rapidamente un colore a qualsiasi elemento HTML. Queste classi seguono una convenzione chiara e coerente, basata su una palette predefinita ma completamente personalizzabile.

Convenzione delle classi background

Le classi per il colore di sfondo iniziano con il prefisso bg-, seguito dal nome del colore e, opzionalmente, da un livello di intensità.
Esempio:

bg-blue-500
bg-gray-100
bg-red-700

La struttura generale è: bg-{colore}-{intensità}

Palette di colori predefinita

TailwindCSS include una palette estesa di colori pronti all’uso. Ogni colore è suddiviso in più tonalità numerate, solitamente da 50 a 950, dove i numeri più bassi indicano colori più chiari e quelli più alti colori più scuri.

Colori principali disponibili:

gray
slate
zinc
neutral
stone
red
orange
amber
yellow
lime
green
emerald
teal
cyan
sky
blue
indigo
violet
purple
fuchsia
pink
rose

Esempio pratico:

<div class="bg-green-200">Sfondo verde chiaro</div>
<div class="bg-green-800">Sfondo verde scuro</div>

Livelli di intensità del colore

Ogni colore è disponibile in diversi livelli di luminosità. I livelli standard sono: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950

Il livello 500 rappresenta generalmente il colore “base” ed è il più usato per elementi principali come pulsanti o sezioni evidenziate.

Colori di sfondo trasparenti

TailwindCSS supporta colori di sfondo trasparenti tramite:

bg-transparent
bg-current
bg-inherit

bg-transparent rende lo sfondo completamente trasparente. bg-current utilizza il valore del colore del testo corrente. bg-inherit eredita il colore di sfondo dall’elemento genitore.

Gestione dell’opacità del background

È possibile controllare l’opacità del colore di sfondo usando la sintassi con slash: bg-blue-500/50

In questo esempio il colore blu ha un’opacità del 50%. I valori vanno da 0 a 100.

Esempio:

<div class="bg-red-600/75">Rosso semi-trasparente</div>

Colori di sfondo e stati interattivi

Le classi di background possono essere combinate con varianti di stato come:

hover
focus
active
disabled

Esempio:

<button class="bg-blue-500 hover:bg-blue-600 active:bg-blue-700">
  Pulsante interattivo
</button>

Colori di sfondo responsive

TailwindCSS consente di cambiare il colore di sfondo in base alla dimensione dello schermo utilizzando i prefissi responsive:

Esempio:

<div class="bg-gray-200 md:bg-blue-200 lg:bg-green-200">Sfondo adattivo</div>

Utilizzo con modalità dark

Per supportare la modalità scura, TailwindCSS fornisce la variante dark:.

Esempio:

<div class="bg-white dark:bg-gray-900">Contenuto con dark mode</div>

Questo approccio consente di definire colori diversi senza duplicare la struttura HTML.

Colori di sfondo personalizzati

La palette di colori può essere estesa o modificata nel file tailwind.config.js.

Esempio:

module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          light: "#E0F2FF",
          DEFAULT: "#1E90FF",
          dark: "#0047AB",
        },
      },
    },
  },
};

Utilizzo:

<div class="bg-brand">Colore personalizzato</div>
<div class="bg-brand-dark">Colore personalizzato scuro</div>

Colori di sfondo e accessibilità

Quando si scelgono i colori di sfondo è importante garantire un contrasto sufficiente con il testo. TailwindCSS non impone regole di accessibilità, ma la sua struttura rende semplice sperimentare e correggere rapidamente i colori per rispettare le linee guida WCAG.

Best practice nell’uso dei background

Utilizzare tonalità chiare per grandi superfici
Riservare colori intensi per elementi di attenzione
Mantenere coerenza cromatica in tutta l’interfaccia
Usare opacità per sovrapposizioni e layer visivi
Centralizzare i colori personalizzati nella configurazione

Integrazione con altri sistemi di stile

Le classi di colore di sfondo possono essere combinate liberamente con utility di padding, margin, border e typography, permettendo di costruire layout complessi senza scrivere CSS personalizzato.

Esempio:

<div class="bg-indigo-500 text-white p-6 rounded-lg shadow-lg">
  Card con stile completo
</div>

Conclusione operativa

Il sistema di colori di sfondo di TailwindCSS è progettato per essere veloce, flessibile e scalabile. Grazie alle utility class, alle varianti di stato e alla personalizzazione avanzata, è possibile gestire qualsiasi esigenza di design mantenendo il codice pulito e facilmente manutenibile.