Zum Inhalt springen
Numio

CSS in Tailwind-CSS-Klassen umwandeln — Numio

Wandle CSS-Deklarationen in Tailwind-CSS-Utility-Klassen um, dargestellt als @apply-Regeln pro Selektor. Nutze das Tool, um bei der Migration bestehender Styles passende Utilities nachzuschlagen. Der Konverter zielt auf Tailwind CSS v3.

Bei einer Migration die Tailwind-Utilities finden, die bestehenden CSS-Regeln entsprechen.

CSS

TailwindCSS 3.x

Wann sie hilft

  • Bei einer Migration die Tailwind-Utilities finden, die bestehenden CSS-Regeln entsprechen.
  • Tailwind-Klassennamen lernen, indem du CSS umwandelst, das du bereits kennst.

Anwendung

  1. Füge CSS-Regeln ein.
  2. Passe den rem-Basiswert oder die Tailwind-Konfiguration an, wenn dein Projekt eigene Einstellungen verwendet.
  3. Kopiere die Klassen nach @apply in dein Markup oder Stylesheet und prüfe das Ergebnis in deinem Tailwind-Projekt.

CSS-Eingabe

.card { display: flex; padding: 1rem; }

Tailwind-Ausgabe (Standard-Skala)

.card {
  @apply flex p-4;
}

Details und Einschränkungen

Klassennamen und Skalen folgen Tailwind CSS v3. Kompatibilität mit Konfiguration und Syntax von Tailwind CSS v4 ist nicht garantiert.

Eigene Werte, komplexe Selektoren und Pseudo-Elemente werden eventuell nicht umgewandelt. Ein identisches Aussehen ist nicht garantiert, prüfe es daher auf der echten Seite.

Das Feld für die eigene Konfiguration wird in deinem Browser als JavaScript ausgewertet. Füge keine Konfiguration ein, der du nicht vertraust.

FAQ

Wird Tailwind CSS v4 unterstützt?

Das Tool verwendet Klassennamen und Skalen von Tailwind CSS v3. Viele Utilities wie flex, p-4 und text-sm heißen in v4 gleich, aber v4 verlagert die Konfiguration in CSS und benennt einige Utilities um. Prüfe die Ausgabe daher in deinem v4-Projekt.

Wie verwende ich Klassennamen statt @apply?

Kopiere die Liste nach @apply in das class-Attribut des Elements, zum Beispiel class="flex p-4". Die @apply-Form gruppiert die Klassen nach dem ursprünglichen Selektor.

Kann es Bootstrap-Klassen in Tailwind umwandeln?

Nein. Es wandelt CSS-Deklarationen um, keine Klassennamen eines anderen Frameworks. Füge die CSS-Regeln hinter einer Bootstrap-Komponente ein, um die passenden Utilities zu sehen.

Warum werden manche Deklarationen nicht umgewandelt?

Für Werte außerhalb der Tailwind-Skala, komplexe Selektoren und Pseudo-Elemente gibt es eventuell keine direkte Utility. Behalte sie als CSS oder ergänze sie in deiner Tailwind-Konfiguration.