Tailwind CSS tilbyder en yderst tilpasselig konfigurationsfil, hvor du kan ændre standardtemaet, så det bedre matcher dit projekts designkrav. Dette kapitel omhandler, hvordan du tilpasser farvepaletter, angiver brugerdefinerede skrifttyper og justerer afstandsskalaen.

Bemærk

For at tilpasse nogen af Tailwind CSS' standardstile skal vi opdatere tailwind.config.js-filen.

Tilpasning af farvepaletter

Det er muligt at tilføje nye farver, udvide eksisterende eller helt erstatte standardfarvepaletten.

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

Derefter, når vi tilføjede en brugerdefineret farvepalette, var vi klar til at bruge den i HTML'en.

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

Indstilling af brugerdefinerede skrifttyper

Vi kan også tilpasse skrifttyperne i Tailwind CSS ved at tilføje nye skrifttypefamilier til konfigurationsfilen.

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

Herefter skifter vi til HTML'en.

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

Tilpasning af afstandsskala

Tailwind CSS leverer en standard afstandsskala, men det er muligt at tilpasse denne, så den matcher designkravene, ved at tilføje eller ændre afstandsværdier i konfigurationsfilen.

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

Anvendelse i 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>

Bemærk

Princippet bør nu være forstået. Enhver hjælpeklasse kan udvides med funktionalitet i konfigurationsfilen. Dokumentation om dette emne findes her.