Tailwind CSS bietet eine hochgradig anpassbare Konfigurationsdatei, in der das Standard-Theme modifiziert werden kann, um besser zu den Designanforderungen Ihres Projekts zu passen. In diesem Kapitel wird erläutert, wie Farbpaletten angepasst, eigene Schriftarten festgelegt und der Abstandsmaßstab verändert werden können.

Hinweis

Um Standardstile von Tailwind CSS anzupassen, muss die Datei tailwind.config.js aktualisiert werden.

Farbpaletten anpassen

Es können neue Farben hinzugefügt, bestehende erweitert oder die Standard-Farbpalette vollständig überschrieben werden.

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

Nachdem wir eine benutzerdefinierte Farbpalette hinzugefügt haben, können wir diese im HTML verwenden.

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

Benutzerdefinierte Schriftarten festlegen

Auch die Schriftarten in Tailwind CSS können durch das Hinzufügen neuer Schriftfamilien in der Konfigurationsdatei angepasst werden.

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

Anschließend erfolgt die Anwendung im 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>

Anpassung der Abstands-Skala

Tailwind CSS stellt eine Standard-Abstandsskala bereit, die jedoch an die Designanforderungen angepasst werden kann, indem Abstands-Werte in der Konfigurationsdatei hinzugefügt oder geändert werden.

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

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

Hinweis

Das Prinzip sollte nun verständlich sein. Jede Utility-Klasse kann über die Konfigurationsdatei um Funktionalität erweitert werden. Dokumentation zu diesem Thema ist hier verfügbar.