So nutzt du: CSS zu Tailwind Converter
- Füge CSS-Regeln (mit Selektoren) oder nur Deklarationen ein.
- Lies die Klassenliste, die für jeden Selektor erzeugt wurde.
- Kopiere die Klassen in dein HTML oder JSX. Prüfe beliebige Werte und ersetze sie, wo es sinnvoll ist, durch Theme-Tokens.
So werden Werte zugeordnet
Die Standard-Abstandsskala von Tailwind arbeitet mit Schritten von 0,25 rem (4 px). Daher wird padding: 16px zu p-4 und margin: 0 auto zu my-0 mx-auto. Werte, die nicht auf der Skala liegen, nutzen die Syntax für beliebige Werte: padding: 13px → p-[13px]. Typografie, Radien und Schriftstärken werden auf ihre benannten Stufen abgebildet:
| CSS | Tailwind |
|---|---|
display: flex; flex-direction: column | flex flex-col |
gap: 16px | gap-4 |
font-size: 24px; font-weight: 700 | text-2xl font-bold |
border-radius: 12px | rounded-xl |
background-color: #7c5cff | bg-[#7c5cff] |
width: 100% | w-full |
.btn:hover { color: #fff } | hover:text-white |
Grenzen, die du kennen solltest
- Farben werden zu beliebigen Werten. Ordne sie danach deiner Theme-Palette zu, zum Beispiel
bg-violet-500. Das Tool CSS-Variablen zu Tailwind hilft dabei, ein Theme zu definieren. - Eigenschaften ohne passende Utility werden als beliebige Eigenschaften geschrieben, z. B.
[mask-image:url(...)]. - Media Queries, komplexe Selektoren und Animationen musst du manuell in
md:,group-hover:und die Theme-Konfiguration übersetzen. !importantwird zum!-Präfix.
Für einzelne Werte erstellt der Tailwind Generator für beliebige Werte einzelne Klassen. Der Tailwind Farbgenerator erstellt komplette Paletten.
Auch gesucht als: css zu tailwind, css in tailwind umwandeln, tailwind converter, css zu tailwind klassen, tailwind css generator, css auf tailwind migrieren, tailwind css konverter.
Passende Tools zu: CSS zu Tailwind Converter
- PX zu REM Umrechner — Rechne zwischen Pixeln, rem und em mit deiner eigenen Root-Schriftgröße um – oder füge ein ganzes Stylesheet ein und konvertiere jeden px-Wert auf einmal.
- CSS Formatter — Verwandle ein minifiziertes Stylesheet in gut lesbares CSS mit einer Eigenschaft pro Zeile und sauber verschachtelten @media-Blöcken.
- CSS-Animation-Generator — Gestalte CSS-Animationen auf einer echten Keyframe-Timeline.
- CSS Keyframes Generator — Ein visueller Editor für @keyframes.
Häufige Fragen
Unterstützt es Tailwind v4?
Ja. Die erzeugten Utilities und Werte für beliebige Angaben funktionieren in Tailwind v3 und v4.
Warum werden Farben als bg-[#hex] geschrieben?
Exakte Farben bleiben als beliebige Werte erhalten, damit sich optisch nichts ändert. Ersetze sie durch deine Theme-Farben, sobald du eine Palette hast.
Kann es Media Queries umwandeln?
Nicht automatisch. Wandle die Regeln innerhalb einer Media Query separat um und füge das passende responsive Präfix hinzu, zum Beispiel
md:.Kann ich CSS zu Tailwind Converter als Web-App installieren und offline nutzen?
Ja. CSS zu Tailwind Converter ist eine installierbare Web-App (PWA) – sie wird über Ihren Browser installiert und nicht aus einem App-Store heruntergeladen. Klicken Sie oben auf dieser Seite in Chrome oder Edge (Windows, macOS, Linux, ChromeOS) auf „App installieren“ oder verwenden Sie auf Android-Geräten „Teilen“ → „Zum Startbildschirm hinzufügen“ auf dem iPhone und iPad bzw. „Datei“ → „Zum Dock hinzufügen“ in Safari 17+ auf einem Mac. Die App öffnet sich dann in einem eigenen Fenster mit einem eigenen Symbol, und da sie vollständig in Ihrem Browser ausgeführt wird, funktioniert sie auch offline. Firefox auf dem Desktop kann keine Web-Apps installieren. So funktioniert die Installation.