CSS in Tailwind Online konvertieren
Traditionelles CSS in Tailwind-Utility-Klassen umwandeln. Kostenlos, in deinem Browser.
Wofür es gedacht ist
Dein CSS zu Utility-First mit Tailwind migrieren
Kompatibel mit Tailwind v3 und v4
Generierte Klassen sind mit modernen Versionen von Tailwind CSS und der JIT-Engine für beliebige Werte kompatibel.
100% privat
Dein CSS wird im Browser verarbeitet. Nie an Server gesendet. Ideal zum Konvertieren von proprietären Projektstilen.
Präzise Äquivalenzen
Treue Zuordnung zwischen CSS-Eigenschaften und Tailwind-Klassen, mit beliebigen Werten für Eigenschaften ohne exaktes Äquivalent.
Sofortig
Echtzeit-Konvertierung. Füge dein CSS ein und Tailwind-Klassen erscheinen sofort.
So funktioniert es
Drei Schritte, kein Aufwand
Dein CSS einfügen
Gib den CSS-Block ein, den du konvertieren möchtest. Es kann ein Selektor mit seinen Eigenschaften oder mehrere CSS-Regeln sein.
Die äquivalenten Tailwind-Klassen erhalten
Das Tool ordnet jede CSS-Eigenschaft ihrer nächsten Tailwind-Utility-Klasse zu. Eigenschaften ohne direktes Äquivalent werden als beliebige Werte in der Klammer-Syntax angezeigt.
Klassen kopieren und im HTML anwenden
Kopiere die generierten Klassen direkt in das class-Attribut deines HTML-Elements. Kompatibel mit Tailwind CSS v3 und v4.
FAQ
Noch Fragen?
Tailwind CSS ist ein Utility-First-CSS-Framework, das von Adam Wathan erstellt und 2017 veröffentlicht wurde. Statt vorgefertigter CSS-Komponenten wie Bootstrap bietet Tailwind Low-Level-Utility-Klassen (wie flex, pt-4, text-gray-700), die direkt im HTML kombiniert werden. Das eliminiert die Notwendigkeit, für die meisten Stile eigenes CSS zu schreiben, und fördert Design-Konsistenz.
Das Tool konvertiert die gängigsten CSS-Eigenschaften: Layout (display, Flexbox, Grid, position), Abstände (margin, padding), Typografie (font-size, font-weight, line-height, color), Hintergründe, Ränder, Schatten, Deckkraft und mehr. Eigenschaften ohne exaktes Tailwind-Äquivalent werden mit Tailwinds Syntax für beliebige Werte ausgedrückt, wie w-[123px] oder bg-[#1a2b3c].
Tailwind enthält ein System für beliebige Werte, das jeden CSS-Wert in Klammern erlaubt: w-[37px], text-[#ff6600], grid-cols-[1fr_2fr_1fr]. Das bedeutet, jede CSS-Eigenschaft kann in Tailwind ausgedrückt werden, auch ohne vordefinierte Klasse für diesen genauen Wert. Beliebige Werte werden von Tailwinds JIT-Engine (Just-In-Time) kompiliert und nur im finalen CSS eingebunden, wenn sie verwendet werden.
Dieses Tool konvertiert CSS-Basis-Eigenschaften ohne Zustandsvarianten. Pseudo-Selektoren wie :hover, :focus, :active und Media-Queries werden in Tailwind mit Präfixen wie hover:, focus:, md:, lg: ausgedrückt. Für CSS mit komplexen Zuständen kann das Ergebnis als Ausgangspunkt dienen, dem du manuell die nötigen Varianten-Präfixe hinzufügst.
Vermeide die Konvertierung, wenn CSS komplexe Animationen mit @keyframes hat, experimentelle oder anbieterspezifische Eigenschaften ohne Tailwind-Unterstützung verwendet, wenn das Projekt kein Tailwind verwendet und das Hinzufügen eine größere Architekturänderung wäre, oder wenn CSS bereits gut mit BEM oder CSS-Modulen organisiert ist und das Team diese Methodik bevorzugt. Tailwind glänzt bei neuen Projekten oder vollständigen Neugestaltungen.
Tailwind CSS 2020-2026: Utility-First vs. semantisches CSS und Migrations-Strategien
Tailwind CSS wurde von Adam Wathan und Steve Schoger erstellt und 2017 öffentlich veröffentlicht. Version 1.0 erschien 2019, v2 im November 2020 mit Dark-Mode und JIT (anfangs als Plugin), und v3 im Dezember 2021 mit eingebautem JIT als Standard. V4 (2024-2025) schrieb die Engine in Rust um, um die Kompilierung noch schneller zu machen. Tailwind wurde die meistgeladene CSS-Bibliothek auf npm und überholte Bootstrap.
Die Debatte Utility-First vs. semantisches CSS ist eine der aktivsten in der Frontend-Community. Kritiker argumentieren, dass Tailwind Struktur und Präsentation im HTML vermischt (entgegen dem Prinzip der Aufgabentrennung), dass HTML mit vielen Tailwind-Klassen schwer zu lesen ist und dass generiertes CSS ohne korrektes Purging groß werden kann. Befürworter argumentieren, dass es das CSS-Klassen-Benennungsproblem eliminiert, das Design konsistenter macht und die Wartung durch Kolokation von Stilen mit dem Markup vereinfacht.
Die Migration bestehender Projekte von traditionellem CSS oder Bootstrap zu Tailwind ist ein schrittweiser Prozess. Gängige Strategien umfassen die komponentenweise Migration, die Verwendung von @apply zur Erhaltung der CSS-Dateitrennung während des Übergangs, und die Einführung von Tailwind nur für neue Komponenten bei Beibehaltung des Legacy-CSS. Tools wie dieser Konverter erleichtern die anfängliche Migrationsphase, indem sie die Übersetzung vorhandener CSS-Eigenschaften in ihr Tailwind-Äquivalent automatisieren.