CSS → Tailwind-Utilities
Datenschutz by Design — läuft vollständig in Ihrem Browser
Fügen Sie CSS-Deklarationen links ein und kopieren Sie rechts die Tailwind-Utility-Klassen. Der Konverter bildet die Standard-Skalen für Spacing, Farbe, Typografie und Layout auf die nativen Utilities ab und greift bei unbekannten Werten auf die Klammer-Notation zurück.
Abbildbare Eigenschaften
Der Konverter erkennt die Alltagsfläche von CSS: Spacing für padding und margin, Schriftgrößen und -gewichte, Farbe (text und bg), display, Flex-Richtung und Ausrichtung, border-radius, width und height, position und gap. Jede landet im kanonischen Tailwind-Shortcut — p-4, text-lg, justify-between — sodass der Output wie handgeschriebenes Tailwind liest.
Warum arbitrary-Notation zählt
Echte Codebases haben Werte ohne Shortcut: ein 13px-Custom-Font, eine Markenfarbe mit Hex, ein 1.7rem Gap. Trifft der Konverter so etwas, gibt er die Tailwind-Arbitrary-Form aus — text-[13px] oder bg-[#3b82f6]. Die Klasse bleibt gültiges Tailwind, JIT verarbeitet sie und der Round-Trip in Richtung Tailwind-to-CSS funktioniert sauber.
Wann es einen Durchgriff gibt
Komplexe Selektoren, Animationen, Gradienten und Keyframes werden bewusst nicht konvertiert — sie leben in CSS-Schichten, die Tailwind über Plugins oder @apply abdeckt, und eine Heuristik wäre an dieser Stelle eine Lüge. Diese Deklarationen kommen wortgetreu als [prop:value] heraus, sodass Sie sie ohne Datenverlust überprüfen können.
Häufig gestellte Fragen
- Welche CSS-Eigenschaften werden erkannt?
- Spacing-Skalen für padding und margin, Text- und Hintergrundfarben, display, Flex-Ausrichtung, Schriftgrößen und -gewichte, border-radius, width und height, position sowie gap. Alles andere landet in einer arbitrary-Klasse [prop:value].
- Was passiert mit Werten außerhalb der Skala?
- Der Konverter gibt arbitrary-Notation aus — p-[13px] oder bg-[#3b82f6]. JIT verarbeitet sie und die Klasse bleibt gültiges Tailwind ohne Nacharbeit.
- Werden CSS-Variablen unterstützt?
- Ja. Werte mit var(--token) erscheinen in Klammern; der Token muss weiterhin im Theme der tailwind.config oder als Custom Property in :root deklariert sein.
- Ist die Umwandlung verlustfrei?
- Bei gängigen Mustern ja. Animationen, Gradienten und exotische Selektoren bleiben als arbitrary-Klassen erhalten — sie überleben, aber Sie wollen vielleicht das Original-CSS behalten.
- Kann ich mit dem Tailwind-to-CSS-Tool zurück?
- Meistens. Einfache Utilities kehren exakt zurück; arbitrary-Werte überstehen, doch nicht unterstützte Deklarationen bleiben auch beim Rückweg in arbitrary-Form.
- Wird etwas hochgeladen?
- Nein. Die gesamte Umwandlung läuft in diesem Browser-Tab; der Inhalt Ihrer Stylesheets verlässt die Seite nicht.