Tailwind CSS-Klassen in normale CSS-Umsetzung

Tailwind CSS-Klassen in normale CSS-Umsetzung

Fügen Sie eine Zeichenkette aus Tailwind v3-Utility-Klassen ein und erhalten sofort die entsprechende Plain-CSS-Regel. Jede Tailwind-Klasse wird in ihre genaue CSS-Deklaration ausgewertet mit den korrekten rem-, px- und Farbwerten aus den offiziellen Design-Token – ohne Vermutung, ohne Rundung.

Nützlich beim Migration eines Tailwind-Components in Vanilla CSS, wenn Sie die zugrundeliegenden Declaratoren untersuchen möchten, oder wenn Sie handgeschriebene CSS-Dateien ohne den Tailwind-Buildschritt versenden müssen.

Nutzung

1. Fügen Sie Ihre Tailwind-Klasse-Zeichenkette in das Eingabefeld ein (z. B. flex items-center gap-4 p-6 bg-blue-500).
2. Ändern Sie optional den Selektor – der Standardwert ist .element.
3. Lesen Sie die erzeugten CSS-Regeln im Ausgabebereich. Responsiv-Varianten (md:, lg:…) werden in entsprechende @media Abfragen eingeschlossen; Zustandsvarianten (hover:, focus:…) erzeugen ihre eigenen Selektoren.
4. Kopieren Sie das Ergebnis oder speichern Sie es als eine .css Datei.

Funktionen

• Vollständige Abstandsskala – Jeder Wert für Margin, Padding, Gap, Breite und Höhe in Tailwind wird in die kanonische rem- oder px-Ausgabe umgerechnet.
• Vollständige Farbpalette – Alle 22 Farffamilien mit den Stufen 50–950 werden in ihre genauen Hex-Codes für Text, Hintergrund, Rand, Füllung und Strich umgerechnet.
• Responsive-Varianten – sm:, md:, lg:, xl:und 2xl: werden als richtige @media (min-width: ...) Blöcke erzeugt.
• Zustandsvarianten – hover:, focus:, active:, disabled:, group-hover:, peer-focus:, dark:, before:, after: und mehr werden zu echten CSS-Selektoren oder Media-Abfragen.
• Arbitrary-Werte – Die eckige-Klammern-Syntax wie w-[37rem] oder bg-[#abc123] werden direkt in die entsprechende Declaratoren übernommen.
• Negative Utilities – Formen wie -mt-4 erzeugen die korrekten negativen rem-Werte.
• Custom selector – Wählen Sie einen beliebigen Selektor, um die Ausgaberegel (.card, #hero, usw.) zu umschließen.
• Kopieren und herunterladen – Ein Klick zum Kopieren des CSS oder zum Speichern als Datei.