CSS zu Tailwind Konverter

Konvertieren Sie CSS online in Tailwind-CSS-Utility-Klassen. Ordnet gängige CSS-Eigenschaften Tailwind-Klassen zu. Kostenloses Migrations-Tool.

CSS

Tailwind Classes

Über die CSS-zu-Tailwind-Konvertierung

Tailwind CSS ist ein Utility-first CSS-Framework, das vordefinierte Klassen statt benutzerdefiniertem CSS verwendet. Dieses Tool automatisiert die Konvertierung gängiger CSS-Eigenschaften wie display, position, flexbox, grid, Abstände, Typografie, Farben und Ränder.

𝕏 Twitter in LinkedIn

Bewerten Sie dieses Tool

4.3 / 5 · 229 Bewertungen

Weitere Werkzeuge

{ }CSS-Minifizierer / Verschönerer CJCSS to JS Object JSXHTML zu JSX SVGSVG zu JSX/React

Bleiben Sie informiert

Wöchentliche Dev-Tipps und neue Tools.

Kein Spam. Jederzeit abbestellbar.

Enjoy these free tools?

☕Buy Me a Coffee

Anleitung

CSS-Code einfügen (mit oder ohne Selektoren)
Konvertieren klicken, um Tailwind-Klassen zu generieren
Konvertierte Klassen und nicht konvertierte Eigenschaften prüfen
Tailwind-Klassen in HTML-Elemente kopieren

Typische Anwendungsfälle

Bestehende CSS-Projekte zu Tailwind CSS migrieren
CSS aus Design-Tools in Tailwind-Klassen konvertieren
Tailwind-Äquivalente für CSS-Eigenschaften lernen
Tailwind-Layouts schnell aus CSS-Mockups erstellen

Häufig gestellte Fragen

Kann alles CSS in Tailwind konvertiert werden?

Nicht jedes CSS hat ein direktes Tailwind-Äquivalent. Das Tool konvertiert gängige Eigenschaften. Komplexes CSS wird als 'nicht konvertiert' markiert.

Wie werden benutzerdefinierte Farben behandelt?

Benutzerdefinierte Farben werden mit Tailwinds Arbitrary-Value-Syntax konvertiert: color: #ff5733 → text-[#ff5733].

Werden responsive Breakpoints unterstützt?

Das Tool konvertiert CSS-Eigenschaften innerhalb jeder Regel. Responsive Klassen (sm:, md:, lg:) müssen manuell hinzugefügt werden.

Kann man CSS mit Selektoren einfügen?

Ja. Das Tool parst CSS-Regelsätze mit Selektoren und zeigt die Tailwind-Klassen für jeden Selektor.