Unterstützt der Konverter responsive Varianten wie md: oder lg:?

Ja, responsive Präfixe werden automatisch in die entsprechenden @media (min-width: ...) Media-Queries übersetzt.

Wie wird die Opazitäts-Syntax (z. B. bg-blue-500/20) verarbeitet?

Diese Syntax wird direkt in eine standardkonforme rgba()-Farbdefinition umgewandelt, die in jedem Browser funktioniert.

Kann ich eigene Selektoren für das generierte CSS festlegen?

Ja, Sie können über die Option 'Gültigkeits-Selektor' einen eigenen Klassennamen wie .my-class oder :root für CSS-Variablen wählen.

Werden auch willkürliche Werte wie w-[327px] unterstützt?

Da es sich um eine statische Regeltabelle handelt, werden willkürliche Werte nur bestmöglich (best-effort) unterstützt. Für volle JIT-Unterstützung wird der offizielle Tailwind-Compiler benötigt.

Benötige ich eine aktive Internetverbindung oder ein installiertes Node.js?

Nein, die Konvertierung läuft direkt im Browser ab und erfordert keine Installation oder Build-Schritte.

Elysia Tools

Mobile Navigation

Development

Tailwind-Klassen zu CSS

Wandelt Tailwind-Klassen (z. B. p-4 flex gap-2 hover:bg-blue-500/20 md:p-6) in äquivalenten CSS-Code für Projekte ohne Tailwind um. Deckt Spacing, Flex, Grid, Farben, Typografie, Rahmen, Effekte, Transformationen, Übergänge und Responsive/Status-Varianten ab.

Einzelheiten

Wobei dieses Tool hilft

Sehen Sie genau, was eine Tailwind-Klasse erzeugt — dann kopieren Sie das reine CSS in jedes Projekt.

Warum. Tailwind ist toll, aber manchmal brauchen Sie rohes CSS: ein Projekt ohne Tailwind, ein E-Mail-Template, ein Design-Token-Audit. Fügen Sie die Klassen ein und erhalten Sie sofort äquivalentes CSS.

Abdeckung. Die Regel-Engine behandelt die häufigsten Utilities: Layout (Flex/Grid/Gap), Spacing, Größen, Farben, Typografie, Rahmen, Effekte, Transformationen, Übergänge und Responsive/Status-Varianten.

Opazitäts-Modifikator. Die Syntax bg-blue-500/20 wird zu rgba() erweitert.

Grenzen. Dies ist eine statische Regeltabelle, nicht die volle JIT-Engine. Für 100% Treue nutzen Sie den offiziellen Tailwind-Compiler.

Ausführung

Dieses Tool ausführen

Fülle das Formular aus, starte das Tool und prüfe das Ergebnis an einem Ort.

Vorbereitete Beispielausführungen

Klicken Sie auf ein Beispiel, um das Formular automatisch auszufüllen. Dateien müssen weiterhin hochgeladen werden.

2 Beispiele

Card-Klassen

Eine typische Karte: Flex-Layout, Padding, Gap, Hover-Hintergrund, responsives Padding, abgerundete Ecken und Schatten.

<div class="tw-root">8 classes recognized. Outputs .my-class { display:flex; gap:1rem; ... } plus a :hover block and an @media (min-width:768px) block.</div>

Button mit Status und Opazitäts-Modifikator

Zeigt, wie die bg-blue-500/75-Syntax zu rgba() erweitert wird sowie hover/focus-Varianten.

<div class="tw-root">7 classes recognized. bg-blue-500/75 expands to rgba(59,130,246,0.75). Outputs .btn plus .btn:hover and .btn:focus blocks.</div>

Eingaben

Fülle die erforderlichen Felder aus und starte das Tool.

2 Optionen

InhaltHaupteingaben einfügen oder eingeben.1

Tailwind-KlassentextareaPflicht

EinstellungenFormate, Bereiche, Zahlen und Modi anpassen.1

Gültigkeks-SelektorselectOptionales Feld

Ergebnis

Bereit zum Start

Nach dem Ausführen erscheinen hier Dateien, Text, strukturierte Daten oder Stream-Ausgaben.

Beispiele

Beispiele zu diesem Tool

Verwandt

Tailwind-Klassen zu CSS

Wobei dieses Tool hilft

Dieses Tool ausführen

Vorbereitete Beispielausführungen

Eingaben

Ergebnis

Beispiele zu diesem Tool

Mit verwandten Tools und Themen fortfahren

Vorbereitete Beispielausführungen

Eingaben

Ergebnis

Erfahren Sie, wann dieses Tool passt, was es unterstützt und wie Nutzer es anwenden.

Wichtige Fakten

Überblick

Wann verwenden

So funktioniert es

Anwendungsfälle

Beispiele

1. Responsive Card-Komponente konvertieren

2. Button mit Status und Transparenz

FAQ

Tailwind CSS Samples

Bulma CSS Framework Beispiele

CSS-Selektor-Beispiele

CSS-Beispiele

Markdown-zu-PDF-Konverter

Markdown zu HTML Konverter

HTML zu Markdown Konverter

Cron-Ausdruck-Erklärer

Markdown-Export-, OCR- und Dokumentkonvertierungs-Tools

Werkzeuge fur Markdown-Erstellung und Publikation

Werkzeuge fur Dokumentations-Authoring, Extraktion und Publishing

Tools fur Audio-Encoding und Formatkonvertierung