Füge CSS ein und erhalte Tailwind-v4-Klassen pro Selektor, oder füge Klassen ein und erhalte CSS zurück. Hover, Fokus und Breakpoints werden zu Varianten, und alles, was sich nicht umwandeln lässt, wird aufgelistet.
Füge normale CSS-Regeln ein, und dieser Konverter gibt für jeden Selektor eine Liste von Tailwind-v4-Klassen zurück. Er verwendet benannte Klassen, wo das Standard-Theme einen exakten Treffer hat, und Arbitrary Values wie w-[37px], wo nicht. Kehre die Richtung um, um eine Klassenliste wieder in CSS zu verwandeln. Selektoren und Regeln, die nicht zu Klassen werden können, werden aufgelistet und nie stillschweigend verworfen.
Wie gängige Deklarationen umgewandelt werden (Standard-Theme von Tailwind v4)
Ein Stylesheet von Hand nach Tailwind zu übertragen heißt, Dutzende Klassennamen nachzuschlagen und Pixel im Kopf in rem umzurechnen. Dieser Konverter übernimmt das Nachschlagen und Rechnen, zeigt, welche Klassen Arbitrary Values sind, die du vielleicht auf die Skala runden möchtest, und sagt dir klar, welche Regeln in einer CSS-Datei bleiben müssen.
Auf Tailwind v4 mit dem Standard-Theme. Abstände werden aus dem --spacing-Wert von 0.25rem berechnet, Radius-Namen folgen der v4-Skala (rounded-xs ist 2px, rounded-sm 4px, rounded-md 6px und so weiter), und Breakpoints verwenden die rem-Werte von v4.
Eine benannte Klasse wird nur verwendet, wenn sie genau denselben Wert ergibt. Farben werden immer zu Arbitrary Values, weil ein Hex-Code selten exakt einem Farbton der Palette entspricht, und Schriftgrößen bleiben arbiträr, weil benannte Textgrößen auch eine Zeilenhöhe setzen.
Selektoren mit Nachfahren, Geschwistern oder Attributen, Media Queries, die nicht aus einem einzelnen min-width bestehen, Keyframes und andere At-Rules sowie Custom Properties. Sie erscheinen in der Liste der nicht umgewandelten Regeln, damit du sie in deine CSS-Datei verschieben kannst.
Klassen aus der Tabelle des Konverters, Arbitrary Values und Arbitrary Properties kommen exakt zurück, wobei Abstände als rem-Werte unter Annahme des Standard-Werts von --spacing angezeigt werden. Theme-Farbnamen wie bg-blue-500 und vordefinierte Schatten stehen nicht in der Tabelle und werden als übersprungen aufgeführt statt geraten.
Nein, aber die Syntax für Arbitrary Properties [property:value] deckt alles ab, wofür Tailwind keine Utility hat, etwa [mask-type:luminance]. Dieser Konverter nutzt sie für jede Eigenschaft, die er nicht kennt.
Eine Karten-Regel mit Hover-Zustand und Tablet-Breakpoint.
Jede Deklaration wird zu einer Klasse; die Hover- und Breakpoint-Regeln werden zu Klassen mit Präfix am selben Element.
Füge CSS-Regeln oder eine Tailwind-Klassenliste ein. Arbitrary Values werden hervorgehoben, und alles, was sich nicht umwandeln lässt, wird unter dem Ergebnis aufgelistet.
Umwandlungsrichtung
CSS zu Tailwind
Tailwind zu CSS
Dein CSS
Deine Tailwind-Klassen
Selektor für die CSS-Ausgabe
Ergebnis
Alles kopieren
Klassen kopieren
Hervorgehobene Klassen sind Arbitrary Values: {n} von {t}.
Nicht umgewandelt ({n})
Alles wurde umgewandelt.
Noch nichts zum Umwandeln.
Selektor braucht eine Klasse an einem anderen Element oder eine eigene Variante
Media Query hat keinen einzelnen Breakpoint
At-Rule bleibt in CSS
Custom Property, in CSS oder @theme belassen
nicht in der Tabelle dieses Konverters
Kostenlos starten · Keine Kreditkarte nötig