Tailwind-zu-CSS-Konverter
Erweitert Tailwind-Utilities zu CSS-Deklarationen.
Über dieses Tool
Das Werkzeug übersetzt verbreitete Tailwind-Utilities in einen CSS-Regelblock. Varianten wie hover: oder md: erscheinen als Hinweis, weil sie einen eigenen Selektor oder eine Media Query benötigen.
So nutzen Sie es
Klassen aus einer Komponente kopieren, die Umwandlung starten und die Deklarationen anschließend in das Stylesheet übernehmen oder mit den eigenen Design-Tokens vergleichen. Unbekannte Utilities bleiben in den Hinweisen sichtbar.
Beispiel
Das Beispiel nutzt typische Utilities für Layout und Abstände.
Eingabe
flex items-center gap-4 p-6 rounded-lg bg-white shadow-lg text-gray-900 font-semiboldAusgabe
.element {
display: flex;
align-items: center;
gap: 1rem;
padding: 1.5rem;
border-radius: 0.5rem;
/* …mapped declarations… */
}Tipp
Gut geeignet, um das CSS hinter einer Utility zu verstehen, bevor man ein Layout umbaut.
Gut zu wissen
Welche Tailwind-Klassen versteht das Tool?
Eine praktische Auswahl: display und position, Flex-Ausrichtung, die Abstandsskala für padding, margin, gap und Größen, Schriftgröße und -stärke, border-radius, einige Schatten, Grid-Spalten, Deckkraft, z-index, eine kurze Liste gängiger Farben und Arbitrary Values wie w-[320px] oder bg-[#38bdf8]. Alles andere steht in den Hinweisen, statt geraten zu werden.
Was passiert mit hover:, md: und anderen Varianten?
Sie werden in den Hinweisen genannt, aber nicht aufgelöst. Eine Variante braucht einen Selektor oder eine Media Query um die Deklaration, also verpacken Sie sie von Hand im Stylesheet.