🌈Tailwind-Farbgenerator

Was bedeuten die Werte 50–950 in Tailwind?

In Tailwind CSS drücken die Werte 50 bis 950 die Helligkeit in 11 Stufen aus – 50 ist die hellste, 950 die dunkelste Farbe, und 500 ist die Basis-Farbe. Diese Zahlen werden am Ende von Klassennamen verwendet, z. B. „bg-primary-500" oder „text-primary-700".

• Stufen 50–300：Die Stufen 50–300 sind helle Farben, die typischerweise für Hintergründe und helle Flächen verwendet werden. Sie ermöglichen eine gute Lesbarkeit, wenn dunkler Text überlagert wird.
• Stufen 600–950：Die Stufen 600–950 sind dunkle Farben, die typischerweise für Hover-Zustände von Schaltflächen und Überschriftentext verwendet werden. Sie sind auch auf hellem Hintergrund deutlich sichtbar.

Unterschiede zwischen v3 und v4 bei der Farbdefinition

In Tailwind CSS v3 werden Farben als JavaScript in tailwind.config.js definiert, während sie in v4 als CSS-Variablen in @theme definiert werden. Unabhängig von der Schreibweise können die Farben mit den gleichen Klassennamen wie „bg-primary-500" verwendet werden.

• v3-Schreibweise：In v3 werden Farben im Format „primary: { 500: '#3B82F6' }" in theme.extend.colors verschachtelt eingegeben.
• v4-Schreibweise：In v4 werden Farben im Format „--color-primary-500: #3B82F6;" mit Bindestrichen verbundenen Variablennamen in @theme eingegeben.