So nutzt du: CSS-Variablen zu Tailwind
- Füge dein CSS ein. Eine komplette Stylesheet-Datei ist kein Problem, es werden nur Custom Properties gelesen.
- Wähle Tailwind v3 config (ein
module.exports-Farbobjekt) oder Tailwind v4 @theme. - Wähle Literal values, um die Farbwerte zu übernehmen, oder var() references, um deine Variablen als einzige Quelle der Wahrheit zu behalten (ideal für Dark Mode und Theming).
- Kopiere das Ergebnis oder lade es herunter und füge es in
tailwind.config.jsoder deine Haupt-CSS-Datei ein.
Was macht dieser Konverter?
Viele Projekte beginnen mit Design-Tokens, die als CSS-Custom-Properties geschrieben sind, zum Beispiel --primary: #ff0055; oder --brand-500: #6366f1;. Wenn du auf Tailwind umsteigst, brauchst du dieselben Farben im Theme, damit Klassen wie bg-primary und text-brand-500 existieren. Alles abzutippen ist langsam und fehleranfällig. Dieses Tool liest jede Custom Property, behält alle Farben und schreibt die Tailwind-Struktur für dich.
Wie Variablen gruppiert werden
--brand-50…--brand-900werden zu einem verschachtelten Objektbrand: { 50: …, 900: … }, sodassbg-brand-50bisbg-brand-900verfügbar sind.- Suffixe wie
-light,-dark,-hoverund-foregroundwerden unter ihrem Basisnamen gruppiert. Die einfache Variable wird zuDEFAULT, sodassbg-primaryundbg-primary-lightbeide funktionieren. - Ein führendes Präfix
color-wird entfernt (--color-surface→surface). - Keine Farben, etwa
--radius-md: 8pxoder Schriftstapel, werden übersprungen und aufgelistet.
Tailwind v3 vs. v4
Tailwind v3 konfiguriert Farben in JavaScript unter theme.extend.colors. Tailwind v4 hat die Konfiguration in CSS verlagert: Jede --color-*-Variable in einem @theme-Block erzeugt Farb-Utilities, und die Standardpalette von v4 nutzt OKLCH. Deshalb wandelt die v4-Ausgabe feste Werte in oklch() um.
Feste Werte oder var()-Referenzen?
Mit Variablenreferenzen (primary: 'var(--primary)') kannst du --primary innerhalb von .dark oder eines Brand-Themes neu definieren, und jede Tailwind-Klasse folgt automatisch. Beachte, dass Tailwind v3 keine Opacity-Modifikatoren wie bg-primary/50 auf einfache var()-Farben anwenden kann. Wenn du sie brauchst, speichere stattdessen die Kanäle (--primary: 255 0 85 mit rgb(var(--primary) / <alpha-value>)). Tailwind v4 unterstützt Opacity-Modifikatoren auf Variablen über color-mix().
Auch gesucht als: tailwind config generator, css variablen tailwind, tailwind farben konfigurieren, css custom properties tailwind, tailwind theme farben, tailwind v4 theme, design tokens tailwind, css variablen umwandeln.
Passende Tools zu: CSS-Variablen zu Tailwind
- Tailwind-Farbgenerator — Füge eine Markenfarbe ein und erhalte eine ausgewogene 11-stufige Farbskala (50 bis 950), die in OKLCH integriert ist – mit Kontrasthinweisen und Exportmöglichkeiten für Tailwind v3, v4, CSS und SCSS.
- Farbkonverter — Füge eine beliebige CSS-Farbe ein — HEX, rgb(), hsl(), hwb(), oklch() oder einen Namen wie tomato — und erhalte sofort alle anderen Formate sowie eine fertige 50–950-Palette.
- CSS Formatter — Verwandle ein minifiziertes Stylesheet in gut lesbares CSS mit einer Eigenschaft pro Zeile und sauber verschachtelten @media-Blöcken.
- Farbname-Finder — Füge einen HEX-Code ein, um den nächstliegenden, gut lesbaren Farbnamen und passende Token-Namen für dein CSS, SCSS, JavaScript oder deine Tailwind-Konfiguration zu erhalten.
Häufige Fragen
Funktioniert das mit Tailwind CSS v4?
--color-*-Variablen zu erhalten. v4 macht daraus Utilities wie bg-primary.Welche Farbformate werden erkannt?
var(--blue-500).