In einem anderen Artikel habe ich bereits über die Mächtigkeit von Tailwind CSS geschrieben. Eine der Gründe dafür ist die einfache Konsistenz und Die Anpassbarkeit. Ein gutes Beispiel dafür ist das Management von Farben.
Hier mal ein Beispiel:
<button class="bg-black text-white uppercase border-2 border-white">text</button>
Selbst wenn man noch nie mit Tailwind gearbeitet hat, wird man sich schon vorstellen können, wie dieser Button aussehen wird. Es handelt sich um einen Button mit dem Inhalt “Text”, die Schrift ist Weiß, der Hintergrund ist Schwarz und er ist umgeben von einer weißen Umrandung.
Das vorhandene Farbschema kann ich dabei sowohl für Umrandungen, Text, Hintergründe und mehr einsetzten. Dazu kommt für die Farben noch Schattierungen. Pink-100 ist zum Beispiel heller als Pink-200.
Welchen genauen Farbcode nun die jeweiligen Klassen haben, legt man in der Konfigurationsdatei fest (wenn man nicht die Standards verwenden möchte). Man muss also nur an einer Stelle im Code den Farbwert verändern, um ihn überall zu verwenden.
Diese Eigenschaft ist besonders praktisch, wenn man noch keine klaren Vorstellung von den Farbtönen bei Beginn des Projektes hat. Ein Beispiel wäre zum Beispiel ein dunkler roter Error-Button. Diesem würde ich dann bg-red-500 zuweisen. Ob nun #F11B2B oder #FF2600 besser im fertigen Design aussieht, gebe ich in meiner tailwind.config.js an. Die Änderung wird dann im kompletten Code übernommen, so dass dann etwa auch der Rahmen um die Error-Nachricht auch die selbe Farbe hat. So gibt es nur eine Quelle der Wahrheit und man kann das Suchen nach Inkonsistenzen auf ein Minimum reduzieren.
Wie gesagt, kommt Tailwind mit einem Standard an Farben. Ganz persönlich gefallen mir die Grautöne dabei nicht so sehr. Dies lässt sich aber, wie gesagt, schnell anpassen. Dazu kommt, dass ich diese Anpassungen direkt in ein neues Projekt übernehmen kann und nicht jedes Mal neu eingeben muss.
Um die Farbpalette für die Grautöne in Tailwind zu ändern, fügt man diesen Code in die tailwind.config.js ein.
module.exports = {
theme: {
extend: {
colors: {
gray: {
'100': '#F8F8F8',
'200': '#E0E0E0',
'300': '#C8C8C8',
'400': '#888888',
'500': '#707070',
'600': '#505050',
'700': '#383838',
'800': '#282828',
'900': '#101010',
}
}
}
}
}
Schon fertig. Dies lässt sich natürlich auf alle Farbtöne in Tailwind anwenden. Die Änderungen gelten dabei für jeden Einsatz einer Farbe mit entsprechenden Wert, sei es Textfarbe oder Hintergrundfarbe. Mehr Informationen findest du in der guten Dokumentation von Tailwind.