Tailwind CSS надає високонастроюваний файл конфігурації, у якому можна змінювати стандартну тему відповідно до вимог дизайну вашого проєкту. У цьому розділі розглядається, як налаштовувати палітри кольорів, задавати власні шрифти та коригувати шкалу відступів.

Примітка

Для налаштування будь-яких стандартних стилів у Tailwind CSS необхідно оновити файл tailwind.config.js.

Налаштування палітр кольорів

Можна додавати нові кольори, розширювати наявні або повністю замінювати стандартну палітру кольорів.

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

Після додавання власної палітри кольорів, ми можемо використовувати її в 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>

Налаштування власних шрифтів

Можна також налаштувати шрифти в Tailwind CSS, додавши нові сімейства шрифтів у файл конфігурації.

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

Далі переходимо до 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>

Налаштування шкали відступів

Tailwind CSS надає стандартну шкалу відступів, але її можна налаштувати відповідно до вимог дизайну, додаючи або змінюючи значення відступів у конфігураційному файлі.

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

Використання в 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>

Примітка

Принцип має бути зрозумілим. Будь-який клас-утиліта можна розширити функціональністю у конфігураційному файлі. Документацію з цієї теми можна знайти тут.