Tailwind-zu-CSS-Konverter
Tailwind-Klassen in echtes CSS umwandeln: Klassen eingeben und die erzeugten Regeln mit Tailwind v4 sofort ansehen.
Der Tailwind-zu-CSS-Konverter wandelt Tailwind-Klassen in echtes CSS um. Du fügst Klassen oder ein HTML-Fragment ein und erhältst zu jeder Klasse die Regeln, die Tailwind v4 erzeugt, inklusive Varianten wie hover: und md:. Auf Wunsch werden Theme-Variablen zu konkreten Werten aufgelöst und Farben als Hex ausgegeben. Der offizielle Tailwind-Compiler läuft dabei direkt im Browser.
Was steckt hinter Tailwind-Klassen?
Jede Tailwind-Klasse steht für eine oder mehrere CSS-Deklarationen. p-4 bedeutet padding: 1rem, hover:bg-blue-600 färbt den Hintergrund beim Überfahren.
Der Konverter zeigt genau diese Übersetzung, damit du CSS verstehst, prüfst oder ohne Tailwind weiterverwendest.
Wo hilft das?
- Lernen, welches CSS hinter einer Klasse steckt.
- Komponenten in Projekte ohne Tailwind übertragen, zum Beispiel in E-Mail-Templates.
- Debuggen, wenn eine Klasse nicht wie erwartet wirkt.
So gehst du vor
- Klassen aus deinem Markup kopieren und einfügen.
- Optionen für Variablen und Hex-Farben wählen.
- CSS übernehmen. Den umgekehrten Weg geht der CSS-zu-Tailwind-Konverter, eine komplette Konfiguration baust du im Tailwind-Config-Generator.
Beispiel
rounded-xl bg-blue-500 px-6 py-3 shadow-md ergibt unter anderem border-radius: 0.75rem, background-color: #3b82f6 und padding-inline: 1.5rem. Farben kannst du im Farbumrechner in andere Formate wandeln.
Häufige Fragen
Wie genau ist die Umwandlung?
Sie stammt vom offiziellen Tailwind-Compiler in Version 4 mit der Standard-Theme-Datei. Das Ergebnis entspricht daher dem, was Tailwind selbst erzeugen würde. Eigene Erweiterungen deiner tailwind.config oder deines @theme-Blocks kennt das Tool nicht.
Was bedeutet „Variablen auflösen“?
Tailwind schreibt Werte als CSS-Variablen, etwa var(--color-blue-500) oder calc(var(--spacing) * 4). Mit der Option ersetzt das Tool sie durch konkrete Werte wie #3b82f6 und 1rem. So erkennst du sofort, was die Klasse bewirkt.
Warum wird eine Klasse als unbekannt markiert?
Entweder gibt es sie in Tailwind v4 nicht, sie ist ein Tippfehler oder sie stammt aus einem Plugin oder deinem eigenen Theme. Auch reine Markierungsklassen wie „group“ erzeugen kein CSS.
Warum sind Farben leicht anders als in Tailwind v4?
Tailwind v4 definiert Farben in OKLCH, teils außerhalb des sRGB-Bereichs. Die Hex-Anzeige rundet auf den nächsten darstellbaren Wert. Für exakte Werte schaltest du die Hex-Option aus.
Stimmt etwas nicht auf dieser Seite? – wir schauen uns das an.