Tailwind CSS tarjoaa erittäin muokattavan konfiguraatiotiedoston, jossa voit muokata oletusteemaa vastaamaan paremmin projektisi suunnittelutarpeita. Tässä luvussa käsitellään, miten mukautetaan väripaletteja, asetetaan omia fontteja ja säädetään välistysasteikkoa.

Huomio

Kaikkien Tailwind CSS:n oletustyylien muokkaamiseksi meidän tulee päivittää tailwind.config.js -tiedosto.

Väripalettien mukauttaminen

Voimme lisätä uusia värejä, laajentaa olemassa olevia tai korvata oletusväripaletin kokonaan.

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

Kun lisäsimme mukautetun väripaletin, olimme valmiita käyttämään sitä HTML:ssä.

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

Mukautettujen fonttien asettaminen

Voimme myös mukauttaa fontteja Tailwind CSS:ssä lisäämällä uusia fonttiperheitä konfiguraatiotiedostoon.

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

Tämän jälkeen siirrytään HTML:ään.

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

Välimatka-asteikon mukauttaminen

Tailwind CSS tarjoaa oletusarvoisen välimatka-asteikon, mutta sitä voidaan mukauttaa suunnittelutarpeiden mukaan lisäämällä tai muokkaamalla välimatka-arvoja asetustiedostossa.

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

Käyttö HTML:ssä.

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

Huomio

Periaate on nyt varmasti selvä. Mitä tahansa utiliteettiluokkaa voidaan laajentaa toiminnallisuudella asetustiedostossa. Dokumentaatiota tästä aiheesta löytyy täältä.