CSS-zu-Tailwind-Konverter
CSS in Tailwind-Klassen umwandeln: passende Utilities oder arbitrary values, nicht umsetzbare Regeln werden markiert.
Der CSS-zu-Tailwind-Konverter wandelt CSS-Regeln in Tailwind-v4-Klassen um. Er erkennt Abstände, Farben, Schrift, Rahmen, Schatten, Flexbox, Grid, Übergänge und mehr, gleicht Werte mit dem Standard-Theme ab und wandelt :hover, Media Queries und Dark Mode in Varianten um. Wo es keine exakte Klasse gibt, entsteht eine arbitrary value. Nicht eindeutig umsetzbare Regeln werden markiert.
Von CSS zu Tailwind
Wer bestehendes CSS auf Tailwind umstellt, übersetzt jede Deklaration in eine Utility-Klasse. Das Tool erledigt den größten Teil und zeigt zu jeder Zeile, ob die Klasse exakt passt, nur ähnlich ist oder als arbitrary value geschrieben werden muss.
Was gilt als „exakt“?
| Status | Bedeutung |
|---|---|
| Exakt | Die Klasse erzeugt genau diese Deklaration. |
| Näherung | Sehr ähnlich, aber nicht identisch, etwa bei Farben oder 1fr im Grid. |
| Arbitrary value | Kein Standardwert, deshalb Schreibweise in eckigen Klammern. |
| Nicht umsetzbar | Keine Klasse möglich, zum Beispiel Herstellerpräfixe. |
So gehst du vor
- CSS einer Komponente einfügen.
- Kennzeichnungen prüfen und Näherungen bewusst entscheiden.
- Klassen ins Markup übernehmen. Zur Kontrolle wandelst du sie mit dem Tailwind-zu-CSS-Konverter zurück. Eigene Werte legst du im Tailwind-Config-Generator an.
Beispiel
padding: 12px 24px wird zu py-3 px-6, border-radius: 8px zu rounded-lg und :hover zu hover:. Ein ungewöhnlicher
Wert wie margin-top: 13px wird zur arbitrary value mt-[13px]. Spezielle
Farben prüfst du vorher im Farbumrechner.
Häufige Fragen
Wie genau ist die Umwandlung?
Einfache Eigenschaften mit Standardwerten werden exakt umgesetzt. Bei Farben, die dem Tailwind-Theme nur ähneln, oder bei Werten wie 1fr im Grid steht „Näherung“ mit einer Erklärung. Werte ohne passende Klasse wandelt das Tool in eine arbitrary value um, etwa p-[13px]. Prüfe das Ergebnis immer im Browser.
Was ist eine arbitrary value?
Eine Schreibweise in eckigen Klammern für beliebige Werte, zum Beispiel w-[313px] oder bg-[#123456]. Sie funktioniert überall in Tailwind, ist aber weniger einheitlich als die Skala. Wenn ein Wert oft vorkommt, lege ihn besser im Theme an.
Was passiert mit Hover, Media Queries und Dark Mode?
:hover, :focus, :active und weitere Pseudoklassen werden zu Varianten wie hover:. min-width-Abfragen bei 640, 768, 1024, 1280 und 1536 px werden zu sm:, md:, lg:, xl: und 2xl:. prefers-color-scheme: dark wird zu dark:.
Welche Regeln lassen sich nicht umwandeln?
@keyframes, @font-face und ähnliche At-Regeln haben keine Klasse. Auch Herstellerpräfixe wie -webkit- entfallen, weil Tailwind sie beim Build ergänzt. Solche Fälle stehen in der Übersicht als übersprungen oder nicht umsetzbar.
Warum bekommt text-* eine Zeilenhöhe dazu?
Die Tailwind-Klassen für Schriftgrößen setzen gleichzeitig eine passende line-height. Möchtest du die Zeilenhöhe nicht ändern, ergänze eine eigene leading-Klasse.
Stimmt etwas nicht auf dieser Seite? – wir schauen uns das an.