Tailwind CSS biedt een zeer aanpasbaar configuratiebestand waarin je het standaardthema kunt wijzigen om beter aan te sluiten bij de ontwerpvereisten van je project. Dit hoofdstuk behandelt het aanpassen van kleurpaletten, instellen van aangepaste lettertypen en aanpassen van de afstandsschaal.

Opmerking

Om standaardstijlen van Tailwind CSS aan te passen, moet het tailwind.config.js-bestand worden bijgewerkt.

Kleurpaletten aanpassen

Nieuwe kleuren kunnen worden toegevoegd, bestaande kleuren kunnen worden uitgebreid of het standaard kleurpalet kan volledig worden overschreven.

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

Vervolgens, nadat we een aangepast kleurenpalet hebben toegevoegd, kunnen we deze gebruiken in de 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>

Aangepaste lettertypen instellen

Het is ook mogelijk om lettertypen in Tailwind CSS aan te passen door nieuwe lettertypefamilies toe te voegen aan het configuratiebestand.

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

Daarna schakelen we over naar de 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>

Schaal voor afstand aanpassen

Tailwind CSS biedt een standaard schaal voor afstand, maar deze kan worden aangepast aan de ontwerpbehoeften door waarden toe te voegen of te wijzigen in het configuratiebestand.

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

Gebruik 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>

Opmerking

Het principe is nu duidelijk. Elke utility class kan worden uitgebreid met functionaliteit in het configuratiebestand. Documentatie over dit onderwerp is te vinden hier.