Tailwind CSS bietet eine hochgradig anpassbare Konfigurationsdatei, in der Sie das Standardthema ändern können, um die Designanforderungen Ihres Projekts besser zu erfüllen. Dieses Kapitel behandelt, wie man Farbpaletten anpasst, benutzerdefinierte Schriftarten festlegt und die Abstands-Skala anpasst.

Hinweis

Um Standardstile von Tailwind CSS anzupassen, müssen wir die Datei tailwind.config.js aktualisieren.

Anpassen von Farbpaletten

Wir können neue Farben hinzufügen, bestehende erweitern oder die Standardfarbpalette vollständig überschreiben.

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

Dann, wenn wir eine benutzerdefinierte Farbpalette hinzugefügt haben, waren wir bereit, sie im HTML zu 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>

Anpassen von Schriftarten

Wir können auch die Schriftarten in Tailwind CSS anpassen, indem wir neue Schriftfamilien zur Konfigurationsdatei hinzufügen.

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

Dann wechseln wir zum 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>

Anpassen der Abstands-Skala

Tailwind CSS bietet eine standardmäßige Abstands-Skala, aber wir können sie an die Designanforderungen anpassen, indem wir Abstands-Werte in der Konfigurationsdatei hinzufügen oder ändern.

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

Ich denke, Sie haben das Prinzip verstanden. Jede Utility-Klasse kann mit Funktionalität in der Konfigurationsdatei erweitert werden. Dokumentation zu diesem Thema finden Sie hier.