# 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. > Kanonische Seite: https://elysiatools.com/de/tools/tailwind-class-to-css-converter - **Kategorie:** Development - **Schlagwörter:** tailwind, tailwind zu css, css-schnipsel, utility-klassen, tailwind playground, css-konverter, flex, grid, hover ## Überblick 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. ## Eingaben - **Tailwind-Klassen** (textarea): p-4 flex gap-2 hover:bg-blue-500/20 md:p-6 rounded-lg shadow-md - **Gültigkeks-Selektor** (select) ## Wann verwenden - Wenn Sie Tailwind-Klassen in einem traditionellen CSS-Projekt, einem E-Mail-Template oder einer statischen HTML-Seite ohne Build-Schritt verwenden möchten. - Wenn Sie die genauen CSS-Eigenschaften hinter komplexen Tailwind-Kombinationen wie Opazitäts-Modifikatoren oder Hover-Zuständen verstehen wollen. - Wenn Sie CSS-Snippets für Komponenten erstellen müssen, die unabhängig von externen CSS-Frameworks funktionieren sollen. ## Funktionsweise - Geben Sie Ihre Tailwind-Klassen in das Textfeld ein (z. B. p-4 flex gap-2 hover:bg-blue-500/20 md:p-6). - Wählen Sie optional einen Gültigkeits-Selektor wie .my-class oder :root aus, um die CSS-Regeln zu strukturieren. - Das Tool analysiert die Klassen statisch und generiert das äquivalente CSS inklusive Media-Queries für responsive Präfixe und Pseudoklassen für Zustände. ## Anwendungsfälle - Erstellung von HTML-E-Mail-Templates, die Inline-CSS oder klassische Stylesheets ohne Tailwind-Abhängigkeit benötigen. - Extraktion von CSS-Regeln aus Tailwind-Projekten zur Wiederverwendung in Legacy-Systemen oder CMS-Plattformen. - Lernen und Verstehen der zugrundeliegenden CSS-Eigenschaften, die durch Tailwind-Utilities wie Flexbox, Grid oder Transformationen gesteuert werden. ## Häufig gestellte Fragen ### 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. ## Ähnliche Tools - [Markdown-zu-PDF-Konverter](https://elysiatools.com/de/tools/markdown-to-pdf-converter): Markdown-Dateien in PDF-Dokumente mit Formatierung, Syntaxhervorhebung und Stil konvertieren - [Markdown zu HTML Konverter](https://elysiatools.com/de/tools/markdown-to-html): Konvertiert Markdown-Text in HTML mit anpassbaren Formatierungsoptionen - [HTML zu Markdown Konverter](https://elysiatools.com/de/tools/html-to-markdown): Konvertiert HTML-Inhalt in Markdown-Format mit anpassbaren Konvertierungsoptionen - [Cron-Ausdruck-Erklärer](https://elysiatools.com/de/tools/cron-expression-explainer): Zerlegt einen Cron-Ausdruck (5/6 Felder oder Quartz) in eine Beschreibung in natürlicher Sprache, zeigt die Felder und die nächsten N Ausführungen in jeder IANA-Zone, mit KI-Erklärung - [Figma iOS Android pt dp sp Responsive-Spezifikationskarte](https://elysiatools.com/de/tools/figma-ios-android-pt-dp-sp-responsive-design-spec-card): Rechnet Figma-px-Werte in die korrekten Plattform-Einheiten um und erzeugt eine Entwickler-Spec-Card: iOS-pt (@1x/@2x/@3x mit gerenderten px je Skalierung), Android-dp/sp (Render-Tabelle mdpi…xxxhdpi und Schriftskalierung), Web-rem/vw mit clamp()-Snippet; Prüfung der minimalen Touch-Ziele (44pt iOS / 48dp Android / 44px und 24px WCAG) samt Material-Fensterklassen und Tailwind-Breakpoints. - [Markdown-Vorschau](https://elysiatools.com/de/tools/markdown-preview): Konvertiert Markdown zu HTML mit Syntaxhervorhebung und anpassbaren Themen - [Data-URI-Generator](https://elysiatools.com/de/tools/data-uri-generator): Konvertiert Dateien in Data URIs (Base64 oder prozent-kodiert), um Bilder, Schriftarten und Ressourcen direkt in HTML, CSS oder Markdown einzubetten - [Eingerückte Liste zu ASCII-Baum](https://elysiatools.com/de/tools/ascii-tree-from-indented-list): Wandelt eine eingerückte hierarchische Liste (2/4 Leerzeichen oder Tab; optionale Präfixe -, *, 1.) in einen kopierbaren ASCII-Verzeichnisbaum um. Zwei Stile: Unicode-Rahmen und klassisches ASCII. Schalter für vollständige Führungslinien, nachfolgende Leerzeichen und Blätter in Klammern. ## Beispiele - [Tailwind CSS Samples](https://elysiatools.com/de/samples/tailwind-css): Tailwind CSS examples - Utility-first CSS framework with responsive design, components, and custom configurations - [Bulma CSS Framework Beispiele](https://elysiatools.com/de/samples/bulma): Bulma CSS-Framework-Beispiele einschließlich Spalten, Komponenten, Formular-Steuerelemente, Layout-System und moderne CSS-basierte Design-Muster - [CSS-Selektor-Beispiele](https://elysiatools.com/de/samples/css-selectors): Sammlung von CSS-Selektor-Beispielen für Extraktions- und Analysetests - [CSS-Beispiele](https://elysiatools.com/de/samples/css-viewer-samples): Beispieldateien fuer den Browser-basierten CSS-Viewer