Tailwind CSS tillhandahåller en mycket anpassningsbar konfigurationsfil där du kan modifiera standardtemat för att bättre passa ditt projekts designkrav. Detta kapitel behandlar hur du anpassar färgpaletter, ställer in egna typsnitt och justerar avståndsskalan.

Obs

För att anpassa några standardstilar från Tailwind CSS måste vi uppdatera filen tailwind.config.js.

Anpassa färgpaletter

Vi kan lägga till nya färger, utöka befintliga eller helt ersätta standardfärgpaletten.

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

När vi sedan lade till en anpassad färgpalett var vi redo att använda 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>

Ange anpassade typsnitt

Vi kan även anpassa typsnitten i Tailwind CSS genom att lägga till nya typsnittsfamiljer i konfigurationsfilen.

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

Därefter växlar vi till 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>

Anpassning av avståndsskala

Tailwind CSS tillhandahåller en standard avståndsskala, men vi kan anpassa den för att passa designkraven genom att lägga till eller ändra avståndsvärden i konfigurationsfilen.

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

Användning 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>

Obs

Principen bör nu vara tydlig. Alla hjälparklasser kan utökas med funktionalitet i konfigurationsfilen. Dokumentation om detta ämne finns här.