Colori semplici e palette

Una parte fondamentale di quello che rappresenta il tema di Tailwind CSS sono i colori. Il framework presenta di default un gran numero di colori e palette già pronti, ma è buona norma quella di configurarli diversamente e rimuoverne alcuni in modo da alleggerire il peso del CSS generato.

Esistono due modalità di definizione dei colori: i colori semplici (che di default sono solo bianco, nero e trasparente) e le palette, ovvero gradazioni dello stesso colore, spesso utilizzati per modificare lo stato di un particolare oggetto (immaginate un bottone azzurro che al mouseover diventa blu: stesso colore, diversa gradazione). I colori standard di Tailwind CSS presentano un naming basato sul nome inglese e una palette a base numerica che va da 100 (più chiaro) a 900 (più scuro):

<div class="text-red-900 bg-gray-200 border-blue-500">
    Hello world!
</div>

Modifichiamo i colori standard

La personalizzazione dei colori avviene all'interno dell'oggetto colors nella sezione theme del nostro file di configurazione:

module.exports = {
  theme: {
    colors: {
      indigo: '#5c6ac4',
      blue: '#007ace',
      red: '#de3618',
    }
  }
}

Questa, per esempio, è una situazione abbastanza minimale nella quale comunichiamo al framework che nel nostro portale andremo ad usare esclusivamente 3 colori.

Nel caso si volesse definire una palette, si può utilizzare una struttura gerarchica (massimo di 2 livelli):

module.exports = {
  theme: {
    colors: {
      indigo: {
        lighter: '#b3bcf5',
        default: '#5c6ac4',
        dark: '#202e78',
      }
    }
  }
}

Una volta definiti i colori dobbiamo però utilizzarli. Il comportamento di default di Tailwind CSS è quello di utilizzare i colori nei contesti di textColor, borderColor e backgroundColor. Riprendendo il primo esempio, significa che il framework andrebbe a generare 9 classi all'interno del nostro CSS che possono influenzare il colore dei nostri componenti: text-indigo, text-blue, text-red, border-indigo, border-blue, border-red, bg-indigo, bg-blue, bg-red.

Nel caso di palette il nome della classe sarà composto sia dal colore che dalla gradazione. Per esempio text-indigo-dark o border-indigo-lighter. La keyword default permette di poter utilizzare il colore anche senza gradazione, ad esempio bg-indigo.

Rimuoviamo alcuni colori

Se la nostra esigenza fosse quella di utilizzare alcuni colori di default e di rimuovere gli altri senza dover riscrivere tutto, il consiglio degli autori del framework è quello di includere i colori richiesti in questo modo:

const { colors } = require('tailwindcss/defaultTheme')
module.exports = {
  theme: {
    colors: {
      black: colors.black,
      white: colors.white,
      gray: colors.gray,
      red: colors.red,
      yellow: colors.yellow,
      green: colors.green,
      blue: colors.blue,
      indigo: colors.indigo,
      purple: colors.purple,
    }
  }
}

Così facendo, includeremo i colori necessari senza però dover ripetere il loro valore.