Tailwind CSS Converter
Convert raw CSS to Tailwind CSS utility classes and vice versa. Supports margin, padding, display, flex, grid, colors, typography, borders, and more.
CSS Input
Tailwind Output
Paste CSS on the left to generate Tailwind classes
Tailwind CSS Converter
Convert raw CSS to Tailwind CSS utility classes and vice versa. Supports margin, padding, display, flex, grid, colors, typography, borders, and more.
Features
- Konvertieren Sie CSS-Eigenschaften sofort in Tailwind CSS Utility-Klassen
- Umkehrmodus: Konvertieren Sie Tailwind-Klassen zurück in rohes CSS
- Unterstützt über 50 CSS-Eigenschaften einschließlich Flex, Grid, Abstände, Farben und Typografie
- Verarbeitet beliebige Werte mit Tailwind-Klammer-Notation
- Erkennt Tailwinds Standard-Abstandsskala, Farbpalette und Breakpoints
- Hebt nicht zugeordnete Eigenschaften hervor, damit Sie wissen, was manuelle Konvertierung benötigt
How to use
- Fügen Sie Ihren CSS-Code im linken Panel ein oder klicken Sie auf Beispiel für Beispiel-CSS.
- Sehen Sie die generierten Tailwind-Klassen sofort im rechten Panel.
- Klicken Sie auf Tauschen, um in den Umkehrmodus zu wechseln und Tailwind-Klassen zurück in CSS zu konvertieren.
FAQ
Welche CSS-Eigenschaften werden unterstützt?
Der Konverter unterstützt über 50 gängige CSS-Eigenschaften einschließlich display, position, Flex/Grid-Layout, margin, padding, width, height, font-size, font-weight, Farben, border, border-radius, opacity, box-shadow, z-index, overflow, cursor und viele mehr. Nicht unterstützte Eigenschaften werden als nicht zugeordnete Kommentare aufgelistet.
Kann ich Tailwind-Klassen zurück in CSS konvertieren?
Ja. Klicken Sie auf die Schaltfläche Tauschen, um in den Umkehrmodus zu wechseln. Geben Sie durch Leerzeichen getrennte Tailwind-Utility-Klassen ein, und das Tool generiert die entsprechenden CSS-Deklarationen, eingebettet in einen .element-Selektor.
Wie werden Farben zugeordnet?
Der Konverter erkennt Tailwinds Standard-Farbpalette (slate, gray, red, blue, green, yellow, purple) in verschiedenen Abstufungen (50-900). Hex-Werte wie #3b82f6 werden blue-500 zugeordnet. Nicht erkannte Farben verwenden Tailwinds Syntax für beliebige Werte, z.B. bg-[#custom].
Verarbeitet er verkürzte CSS-Eigenschaften?
Ja. Verkürzte Eigenschaften wie margin, padding und border werden analysiert und in ihre Tailwind-Entsprechungen konvertiert. Zum Beispiel wird margin: 8px 16px zu my-2 mx-4, und border: 1px solid #ccc wird zu border border-solid border-[#ccc].
Werden meine CSS-Daten an einen Server gesendet?
Nein. Die gesamte Konvertierung erfolgt vollständig in Ihrem Browser mit clientseitigem JavaScript. Ihr CSS-Code verlässt niemals Ihr Gerät, was dieses Tool vollständig privat und sicher für die Verwendung mit proprietärem Code macht.
Was passiert mit nicht unterstützten Eigenschaften?
Eigenschaften, die nicht auf eine Standard-Tailwind-Klasse abgebildet werden können, werden als Kommentare in der Ausgabe aufgelistet. So sehen Sie genau, welche Eigenschaften manuelle Bearbeitung oder eine benutzerdefinierte Tailwind-Konfiguration benötigen.
Unterstützt es beliebige Tailwind-Werte?
Ja. Wenn ein CSS-Wert nicht mit Tailwinds Standardskala übereinstimmt, verwendet der Konverter die Syntax für beliebige Werte wie p-[13px] oder text-[22px]. Im Umkehrmodus werden beliebige Werte wie w-[200px] korrekt zurück zu width: 200px analysiert.