Softonic

CSS zu Tailwind

Schritt 1 / 2
In Tailwind umwandeln

Die Migration eines Legacy-Stylesheets zu Tailwind Regel für Regel ist mühsam. Dieser Konverter nimmt einen Block aus einfachem CSS, mit oder ohne Selektoren und geschweifte Klammern, und schreibt jede Deklaration als Tailwind-Utility um. Erkannte Paare werden in benannte Utilities wie flex, items-center oder rounded-lg umgewandelt, und alles andere fällt auf die Tailwind-Syntax für willkürliche Werte [property:value] zurück, sodass nichts stillschweigend verworfen wird.

Wie der Konverter dein CSS verarbeitet

  1. 1

    Füge das CSS ein

    Füge eine vollständige Regel wie `.card { padding: 16px; border-radius: 8px; }` oder nur die Deklarationen innerhalb der Klammern ein.

  2. 2

    Parser entfernt Kommentare

    Blockkommentare `/* ... */` werden entfernt, bevor die Deklarationen an Semikolons aufgeteilt werden.

  3. 3

    Jede Deklaration wird zugeordnet

    Häufige Eigenschaften werden echten Tailwind-Utilities (Abstand, Radius, Schriftgröße, Flex, Anzeige, Textausrichtung) zugeordnet; Unbekannte fallen auf `[prop:value]` zurück.

  4. 4

    Kopieren und anwenden

    Füge die Klassennamen in das `class`-Attribut des entsprechenden HTML-Elements ein.

Was wird in benannte Utilities umgewandelt

Das Standardthema von Tailwind kann nicht jeden möglichen CSS-Wert abdecken, daher priorisiert der Konverter die Werte, für die eine benannte Utility existiert, und verwendet überall sonst willkürliche Werte.

Direkte Zuordnungen

CSS-Deklaration Tailwind-Utility
display: flex flex
display: grid grid
display: none hidden
justify-content: center justify-center
align-items: center items-center
text-align: center text-center
font-weight: bold font-bold
cursor: pointer cursor-pointer
overflow: hidden overflow-hidden

Maßstabsbewusste Zuordnungen

Padding, Margin, Breite, Höhe, min/max Dimensionen teilen alle einen px-Wert durch 4, um einen Tailwind-Abstandsschritt zu erzeugen, padding: 16px wird zu p-4, width: 32px wird zu w-8. Werte, die nicht auf einem sauberen Schritt landen, fallen auf willkürliche Werte in der entsprechenden Utility zurück, zum Beispiel wird width: 37px zu w-[37px].

border-radius wird der nächstgelegenen benannten Utility (rounded-sm, rounded-md, rounded-lg, rounded-xl, rounded-2xl) zugeordnet. Größen über 16px werden zu rounded-full, was praktisch für Pillen ist, aber falsch für ungewöhnlich große Radien, überprüfe die Ausgabe vor dem Versand.

font-size wird in text-xs bis text-3xl nach Pixelgrenzen eingeteilt.

Hinweise

  • Pseudo-Klassen, Medienabfragen und Selektoren werden nicht übersetzt; nur die Deklarationen innerhalb der Klammern werden übersetzt. Du musst Varianten wie hover: oder md: selbst hinzufügen.
  • Farben landen in willkürlichen Werten wie text-[#1f2937], da der Konverter deine Tailwind-Themenpalette nicht kennt. Tausche manuell in text-gray-800 oder einen benutzerdefinierten Token um.
  • Kurzschreibweisen, die du selten verwendest (border, background, transition), werden unverändert als [property:value] ausgegeben, überprüfe sie vor dem Versand.

Häufig gestellte Fragen

Die Ausgabe verwendet Utility-Namen, die in Tailwind v3 und v4 stabil sind. Willkürliche Werte in eckigen Klammern sind ebenfalls in beiden gültig. Du möchtest möglicherweise Farben nach dem Einfügen in deine v4 @theme-Palette neu tokenisieren.

Der Konverter hat keinen Einblick in deine tailwind.config.js Farbskala. Ordne den willkürlichen Wert manuell dem nächstgelegenen Palette-Token zu, zum Beispiel text-gray-800 oder einem von dir definierten Markentoken.

Ja, füge mehrere Regeln ein. Das Tool gibt eine Klassennamenliste pro Selektor aus, getrennt durch einen /* selector */ Kommentar, damit du sie mit dem entsprechenden HTML abgleichen kannst.

Das CSS wird an unseren Server gesendet, damit der Konverter daraus Tailwind-Klassen erstellt. Es wird nicht gespeichert und taucht nicht im Seitenlink auf.

Verwandte Tools

ASCII-Tabelle Referenz

Vollständige ASCII-Tabelle von 0 bis 127 mit Dezimal-, Hex-, Oktal-, Binär- und numerischer HTML-Zeichenreferenz für jedes Zeichen, einschließlich Steuerzeichen wie NUL, LF und DEL.

HTML-Zeichenreferenz

Durchsuchbare Liste von HTML-Entitäten, ihren benannten und numerischen Codes sowie eine Ein-Klick-Kopie für Sonderzeichen und Symbole.

Referenz für Tastenkombinationen

Durchsuchen Sie dokumentierte Standardkürzel für VS Code, Chrome und Bash mit GNU Readline unter macOS, Windows und Linux.

Zufallsbuchstaben-Generator

Erzeugen Sie zufällige A-Z-Buchstaben. Wählen Sie Anzahl, Großschreibung, Kleinschreibung oder gemischte Schreibweise für Spiele, Aufgaben und Unterricht.

Telefonnummern prüfen

Prüfen Sie die Struktur von Telefonnummern nach Land und zeigen Sie Region, Typ sowie E.164-, internationale, nationale und RFC-3966-Formate an.

Zufälliger Farbgenerator

Erzeuge 1 bis 50 zufällige HEX-Farben mit Farbfeldern zum Prüfen, Kopieren und Verwenden in CSS, Tests oder Palettenideen.

Tool in anderen Sprachen verfügbar