Was wird umgewandelt?

Gängige Tailwind-Utilities für Spacing, Farbe, Typografie, Flex und Position, dazu jede beliebige [value]- oder [prop:value]-Form. Varianten werden noch nicht unterstützt.

Die Ausgabe ist eine einzelne CSS-Regel. Wenn Sie den Selektor wählen, fügen Sie sie ohne Umbenennen direkt in das Stylesheet ein.

Werden Responsive- und Hover-Varianten unterstützt?

Noch nicht — sie brauchen Media-Query- oder Pseudoklassen-Wrapper. Entfernen Sie md:-, hover:- und dark:-Präfixe vorher; Basis-Utilities laufen sauber zurück.

Kennt das Tool mein Tailwind-Theme?

Nein. Es nutzt die Standard-Skala. Anpasstes Spacing oder Farben fallen im Output auf Arbitrary-Deklarationen zurück, das CSS bleibt aber lauffähig.

Kann ich das CSS durch das inverse Tool schicken?

Ja — für einfache Utilities ist der Rückweg exakt. Arbitrary-Werte überleben; nicht unterstützte Deklarationen bleiben als Arbitrary-Klassen.

Wird meine Eingabe hochgeladen?

Nein. Die gesamte Umwandlung läuft in diesem Tab; Toova sieht Ihre Klassenlisten, Selektoren oder Ausgaben nicht.

Tailwind zu CSS — Utilities zu einer Regel

Tailwind-Utilities → CSS

Datenschutz by Design — läuft vollständig in Ihrem Browser

Eine Liste von Tailwind-Utilities und einen Selektor einfügen, und Toova baut die passende CSS-Regel. Arbitrary-Klassen wie p-[13px] oder [grid-template-columns:1fr_2fr] werden zu rohen Deklarationen entpackt, fertig zum Einfügen in ein Stylesheet.

Wann der Rückweg hilft

Manchmal prototypisiert man mit Tailwind, muss aber CSS ausliefern — eine Marketing-E-Mail, ein Drittanbieter-Widget, ein Hand-off an ein CMS ohne Tailwind. Der Konverter faltet die Utility-Liste in eine einzige Regel mit Ihrem Selektor und Sie fügen sie ohne Umbenennen direkt ein.

Wie Arbitrary-Werte zurückkommen

Arbitrary-Klassen tragen den Wert inline: p-[13px] heißt padding: 13px, [grid-template-columns:1fr_2fr] heißt grid-template-columns: 1fr 2fr. Der Konverter packt beide Formen wörtlich aus, so überlebt jeder per JIT codierte Wert die Reise ohne zusätzliche Mapping-Tabelle.

Grenzen und Rundlauf

Responsive Varianten (md:flex), State-Varianten (hover:bg-black) und Dark Mode (dark:text-white) brauchen Media-Query- oder Pseudoklassen-Wrapper, daher gibt der Konverter sie noch nicht aus — entfernen Sie diese vor dem Einfügen. Theme-Tokens (text-brand) fallen auf die Standard-Skala; bei eigenem Theme rechnen Sie mit Arbitrary-Fallbacks. Einfache Utilities laufen sauber mit dem CSS-to-Tailwind-Werkzeug zurück.

Häufig gestellte Fragen

Was wird umgewandelt?: Gängige Tailwind-Utilities für Spacing, Farbe, Typografie, Flex und Position, dazu jede beliebige [value]- oder [prop:value]-Form. Varianten werden noch nicht unterstützt.
Warum ein Selektor?: Die Ausgabe ist eine einzelne CSS-Regel. Wenn Sie den Selektor wählen, fügen Sie sie ohne Umbenennen direkt in das Stylesheet ein.
Werden Responsive- und Hover-Varianten unterstützt?: Noch nicht — sie brauchen Media-Query- oder Pseudoklassen-Wrapper. Entfernen Sie md:-, hover:- und dark:-Präfixe vorher; Basis-Utilities laufen sauber zurück.
Kennt das Tool mein Tailwind-Theme?: Nein. Es nutzt die Standard-Skala. Anpasstes Spacing oder Farben fallen im Output auf Arbitrary-Deklarationen zurück, das CSS bleibt aber lauffähig.
Kann ich das CSS durch das inverse Tool schicken?: Ja — für einfache Utilities ist der Rückweg exakt. Arbitrary-Werte überleben; nicht unterstützte Deklarationen bleiben als Arbitrary-Klassen.
Wird meine Eingabe hochgeladen?: Nein. Die gesamte Umwandlung läuft in diesem Tab; Toova sieht Ihre Klassenlisten, Selektoren oder Ausgaben nicht.