Entwickler

Kostenloser Tailwind-zu-CSS-Konverter

Tailwind-CSS-Klassen in ihre Vanilla-CSS-Entsprechungen konvertieren. Fügen Sie Ihre Klassen ein und erhalten Sie das Standard-CSS mit korrekten Eigenschaften und Werten. Keine Anmeldung erforderlich.

100% kostenlos — kein Konto erforderlich

Tailwind-Klassen

Klassen konvertiert: 7/7

Tailwind

flex

items-center

justify-between

p-4

rounded-lg

bg-white

shadow-md

CSS

display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem;
border-radius: 0.5rem;
/* bg-white: theme-dependent color */
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);

Funktionen von Kostenloser Tailwind-zu-CSS-Konverter

Verstehen, was Ihre Tailwind-Klassen bewirken

Dynamische Muster

Verarbeitet dynamische Werte wie p-4, m-2, w-1/2, text-xl mit korrekter Berechnung.

100+ Klassen

Unterstützt Abstände, Größen, Text, Flex, Grid, Display, Rahmen und mehr.

CSS kopieren

Ein-Klick-Kopie der generierten Vanilla-CSS-Ausgabe.

Präfix-Unterstützung

Erkennt responsive (md:, lg:) und State (hover:, focus:) Präfixe.

Häufig gestellte Fragen

Deckt dies alle Tailwind-Klassen ab?

Es deckt die häufigsten Utility-Klassen (100+) ab. Benutzerdefinierte Theme-Werte und komplexe beliebige Werte konvertieren möglicherweise nicht perfekt.

Was ist mit Farbklassen?

Farbklassen (text-blue-500, bg-red-200) werden als Kommentare angezeigt, da die tatsächlichen Werte von Ihrer Tailwind-Theme-Konfiguration abhängen.

Kann ich einen vollständigen className-String einfügen?

Ja. Fügen Sie durch Leerzeichen getrennte Klassen wie 'flex items-center p-4 text-sm font-bold' ein und jede wird in ihre CSS-Entsprechung konvertiert.

Gefallen Ihnen unsere kostenlosen Tools?

Weitere CSS-Werkzeuge

CSS-Gradient, Box-Shadow, Flexbox-Playground und mehr.

Alle Tools ansehen