Tailwind CSS tilbyr en svært tilpassbar konfigurasjonsfil hvor du kan endre standardtemaet for å bedre tilpasse det til prosjektets designkrav. Dette kapittelet dekker hvordan du tilpasser fargepaletter, setter egendefinerte skrifttyper og justerer avstandsskalaen.

Merk

For å tilpasse noen av standardstilene fra Tailwind CSS, må vi oppdatere tailwind.config.js-filen.

Tilpasse fargepaletter

Vi kan legge til nye farger, utvide eksisterende eller fullstendig overstyre standard fargepalett.

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

Deretter, når vi la til en egendefinert fargepalett, var vi klare til å bruke den i 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>

Angi egendefinerte skrifttyper

Vi kan også tilpasse skrifttypene i Tailwind CSS ved å legge til nye skrifttypefamilier i konfigurasjonsfilen.

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

Deretter går vi over til 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>

Tilpasse avstandsskala

Tailwind CSS tilbyr en standard avstandsskala, men denne kan tilpasses etter designbehov ved å legge til eller endre avstandsverdier i konfigurasjonsfilen.

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

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

Merk

Prinsippet bør nå være forstått. Enhver hjelpeklasse kan utvides med funksjonalitet i konfigurasjonsfilen. Dokumentasjon om dette emnet finnes her.