Tailwind CSS offre un file di configurazione altamente personalizzabile che consente di modificare il tema predefinito per adattarlo meglio ai requisiti di design del progetto. Questo capitolo tratterà come personalizzare le palette di colori, impostare font personalizzati e regolare la scala degli spazi.

Nota

Per personalizzare qualsiasi stile predefinito di Tailwind CSS, è necessario aggiornare il file tailwind.config.js.

Personalizzazione delle palette di colori

È possibile aggiungere nuovi colori, estendere quelli esistenti o sovrascrivere completamente la palette di colori predefinita.

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        customBlue: '#1DA1F2',
        customGreen: '#17BF63',
        customRed: '#E0245E',
      },
    },
  },
};

Successivamente, dopo aver aggiunto una palette di colori personalizzata, è possibile utilizzarla nell'HTML.

<div class="bg-customBlue text-white p-4">Custom Blue Background</div>
<div class="bg-customGreen text-white p-4">Custom Green Background</div>
<div class="bg-customRed text-white p-4">Custom Red Background</div>

Impostazione di Font Personalizzati

È inoltre possibile personalizzare i font in Tailwind CSS aggiungendo nuove famiglie di caratteri nel file di configurazione.

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      fontFamily: {
        sans: ['Helvetica', 'Arial', 'sans-serif'],
        serif: ['Georgia', 'serif'],
        mono: ['Courier New', 'monospace'],
      },
    },
  },
};

Successivamente si passa all'HTML.

<div class="font-sans text-lg">Sans-serif Font</div>
<div class="font-serif text-lg">Serif Font</div>
<div class="font-mono text-lg">Monospace Font</div>

Personalizzazione della scala degli spazi

Tailwind CSS fornisce una scala di spaziatura predefinita, ma è possibile personalizzarla per soddisfare le esigenze di design aggiungendo o modificando i valori di spaziatura nel file di configurazione.

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      spacing: {
        '72': '18rem',
        '84': '21rem',
        '96': '24rem',
      },
    },
  },
};

Utilizzo in HTML.

<div class="p-72 bg-gray-200">Padding 18rem</div>
<div class="p-84 bg-gray-300">Padding 21rem</div>
<div class="p-96 bg-gray-400">Padding 24rem</div>

Nota

Si presume che il principio sia stato compreso. Qualsiasi classe utility può essere estesa con funzionalità aggiuntive nel file di configurazione. La documentazione su questo argomento è disponibile qui.