# Tailwind Arbitrary-Value Playground Fügen Sie Tailwind-Klassen mit Arbitrary Values ein (w-[137px], text-[#bada55], grid-cols-[1fr_2fr], [mask-type:luminance]) und prüfen Sie das erzeugte CSS mit Live-Vorschau, Erkennung von Datentyp-Hinweisen und einer Erklärung jeder Übersetzung. Hilfreich zum Debuggen von calc(), CSS-Variablen und Werten außerhalb der Token-Skala. > Kanonische Seite: https://elysiatools.com/de/tools/tailwind-arbitrary-value-playground - **Kategorie:** Design - **Schlagwörter:** tailwind, arbitrary value, tailwind playground, w-\[..\], tailwind css, utility-klasse, css-generator, calc(), tailwind-klammersyntax, frontend, responsives design, css-variable, design-token ## Überblick Ein Tailwind-Arbitrary-Value-Playground für Frontend-Entwickler und Design-System-Autoren: 1. Fügen Sie eine oder mehrere Tailwind-Klassen mit Klammersyntax ein (leerzeichen- oder zeilengetrennt). 2. Der Parser erkennt drei Formen: Utility + Arbitrary Value (w-[137px]), beliebige Eigenschaft ([mask-type:luminance]) und beliebige Varianten-Selektoren. 3. Datentyp-Hinweise wie text-[length:14px] oder text-[color:var(--brand)] werden erkannt und entlasten überladene Präfixe (text -> Farbe vs font-size, bg -> Bild vs Farbe). 4. Pro Klasse erhalten Sie die erzeugte CSS-Regel (erweitert oder komprimiert), eine Live-Vorschau und eine kurze Erklärung. 5. Statische Klassen ohne Klammern werden aufgelistet, lassen sich aber ohne vollständige Tailwind-Engine nicht expandieren — dieses Werkzeug fokussiert sich auf das Arbitrary-Value-Notschlupfloch. Offline-Parser: kein Tailwind-Runtime wird ausgeführt, daher sind statische Utilities und Theme-Tokens bewusst ausgeklammert. ## Eingaben - **Tailwind-Klassen (eine pro Zeile oder leerzeichengetrennt)** (textarea): w-\[137px\] h-\[calc(100vh-4rem)\] text-\[#bada55\] bg-\[url(/hero.png)\] grid-cols-\[1fr_2fr_1fr\] \[mask-type:luminance\] \[&:hover\]:text-\[#ff0000\] - **CSS-Ausgabestil** (select) - **Vorschauthema** (select) - **Live-Vorschau anzeigen** (checkbox) - **CSS-Erklärung anzeigen** (checkbox) ## Wann verwenden - Wenn Sie komplexe CSS-Berechnungen wie calc() oder CSS-Variablen in Tailwind-Klassen debuggen möchten. - Zur schnellen Überprüfung, wie der Tailwind-Compiler Arbitrary-Properties wie \[mask-type:luminance\] in reines CSS übersetzt. - Wenn Sie Datentyp-Hinweise wie text-\[length:14px\] verwenden und die genaue CSS-Ausgabe ohne lokale Build-Umgebung kontrollieren wollen. ## Funktionsweise - Geben Sie eine oder mehrere Tailwind-Klassen mit Arbitrary-Value-Klammersyntax in das Textfeld ein. - Wählen Sie das gewünschte CSS-Ausgabeformat (erweitert oder komprimiert) sowie das Vorschauthema aus. - Der Offline-Parser analysiert die Klassen, löst Datentyp-Hinweise auf und generiert die entsprechenden CSS-Regeln. - Betrachten Sie die Live-Vorschau der Stile und lesen Sie die detaillierte Erklärung der Übersetzung direkt auf der Seite. ## Anwendungsfälle - Debuggen von komplexen Layout-Größen mit calc() und CSS-Variablen direkt im Browser. - Validierung von Grid-Templates mit benutzerdefinierten Spalten- und Zeilen-Definitionen. - Schnelles Testen von CSS-Eigenschaften, die nicht standardmäßig im Tailwind-Theme konfiguriert sind. ## Häufig gestellte Fragen ### Unterstützt dieser Playground auch statische Tailwind-Klassen wie bg-red-500? Nein, statische Klassen ohne eckige Klammern werden zwar aufgelistet, aber nicht expandiert, da das Tool als Offline-Parser speziell für Arbitrary-Values konzipiert ist. ### Wie werden Leerzeichen in den eckigen Klammern behandelt? Verwenden Sie Unterstriche (_) anstelle von Leerzeichen, beispielsweise in grid-cols-[1fr_2fr_1fr], damit der Parser sie korrekt übersetzt. ### Was bewirken Datentyp-Hinweise wie \[length:...\] oder \[color:...\]? Sie helfen dem Parser, mehrdeutige CSS-Eigenschaften wie text- (Farbe vs. Schriftgröße) oder bg- (Bild vs. Farbe) eindeutig zuzuordnen. ### Benötigt das Tool eine aktive Internetverbindung oder ein installiertes Tailwind? Nein, der Parser läuft vollständig offline im Browser und benötigt keine lokale Tailwind-Installation oder Node.js-Laufzeitumgebung. ### Kann ich beliebige CSS-Eigenschaften direkt deklarieren? Ja, mit der Syntax [eigenschaft:wert] wie [mask-type:luminance] können Sie jede valide CSS-Eigenschaft direkt als Tailwind-Klasse schreiben. ## Ähnliche Tools - [VP8-Bildanalysator](https://elysiatools.com/de/tools/vp8-image-analyzer): Analysiert WebP/VP8-Bilder mit Sharp, erzeugt eine Graustufen-Displacement-Map und rendert ein 3D-Relief mit Three.js - [Wasserfall-Diagramm-Generator](https://elysiatools.com/de/tools/waterfall-chart-generator): Erstellen Sie Wasserfall-Diagramme zur Visualisierung kumulativer Veränderungen mit Positiv/Negativ-Wert-Unterscheidung und Zwischensummenanzeige - [Barrierefreiheits-Auditbericht-Generator](https://elysiatools.com/de/tools/accessibility-audit-report-generator): Prueft HTML oder eine URL auf haeufige WCAG-Probleme und exportiert einen strukturierten PDF-Bericht - [CSV-Splitter](https://elysiatools.com/de/tools/csv-splitter): CSV-Inhalt nach angegebener Zeilenanzahl aufteilen. Perfekt für die Verarbeitung großer Datenmengen, Aufteilung von Daten für Analysen, Stapelverarbeitung und Verwaltung von Dateigrößenbeschränkungen. Funktionen: - CSV nach Zeilenanzahl aufteilen - Unterstützung für mehrere Ausgabeformate - Kopzeile in jeder Aufteilung beibehalten - Flexible Ausgabeformat-Optionen - Unterstützung für große Datenmengen - Schnelle und effiziente Verarbeitung Häufige Anwendungsfälle: - Große CSV-Dateien für Verarbeitung aufteilen - Daten für Parallelverarbeitung aufteilen - Verwaltbare Datenblöcke erstellen - Daten in verschiedenen Formaten exportieren - Daten für Stapeloperationen vorbereiten - Dateigrößenbeschränkungen verwalten - [Schriftdatei-Inspektor (TTF / OTF / WOFF / WOFF2)](https://elysiatools.com/de/tools/font-file-inspector): Lade eine TTF-, OTF-, WOFF- oder WOFF2-Datei hoch (WOFF2 wird automatisch dekomprimiert) und prüfe alle Metadaten: Familie/Subfamilie/Designer/Copyright/Version, Glyphenanzahl, unitsPerEm, Strichstärke und Breite, Kursivwinkel, Stilflags und Bounding-Box; Heatmap der Unicode-Blockabdeckung; SVG-Glyphenvorschau (eigener Text, Auto-Stichprobe für Icon-Fonts); liga-Ligaturen und OpenType-Features; fvar-Achsen und benannte Instanzen variabler Fonts. - [PDF-Strikethrough-Review-Extraktor](https://elysiatools.com/de/tools/pdf-strikethrough-review-extractor): Erkennt durchgestrichenen Text in Review-PDFs und erstellt Berichte fuer Vertrage und Revisionen - [Radardiagramm-Generator](https://elysiatools.com/de/tools/radar-chart-generator): Erstellen Sie anpassbare Radardiagramme aus Daten, perfekt für multidimensionalen Vergleich und Analyse - [Spinnendiagramm-Generator](https://elysiatools.com/de/tools/spider-chart-generator): Vereinfachte Spinnendiagramme (Radar) für multidimensionale Datenvergleiche und Analysen generieren ## 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 - [MP3 Audio-Beispiele ohne Urheberrechte](https://elysiatools.com/de/samples/mp3-samples): Sammlung urheberrechtsfreier Audio-Beispiele zum Testen und Entwickeln, einschließlich Naturklänge, Meditationsmusik und Umgebungsgeräusche - [SVG Beispiele](https://elysiatools.com/de/samples/svg-samples): Beispiele für skalierbare Vektorgrafiken (SVG), die verschiedene SVG-Funktionen und -Techniken demonstrieren - [Android Java Bildverarbeitungsbeispiele](https://elysiatools.com/de/samples/android-image-processing-java): Android Java Bildverarbeitungsbeispiele einschließlich Lesen/Schreiben, Skalierung und Formatkonvertierung ## Verwandte Inhalte - [Textfall-, Encoding- und Normalisierungs-Konvertierungs-Tools](https://elysiatools.com/de/hubs/text-convert): Vergleichen Sie Textfall-Konvertierung, Zeichenbreiten-Konvertierung, Encoding-Konvertierung, Quoted-Printable-Verarbeitung und Inline-Textnormalisierung in einem Hub. - [Text-Tools](https://elysiatools.com/de/hubs/text-utility): Entdecken Sie 33 text-Tools für utility-Workflows und vergleichen Sie ähnliche Utilities schnell. - [Textanalyse-, Lesbarkeits- und Inhaltsinspektions-Tools](https://elysiatools.com/de/hubs/text-analyze): Vergleichen Sie Textstatistik, Spracherkennung, Lesbarkeitsbewertung, Sentimentanalyse, Moderationsprüfung und Musteranalyse in einem Hub. - [Text-Redaktions-, Hervorhebungs- und Darstellungsformatierungs-Tools](https://elysiatools.com/de/hubs/text-format): Vergleichen Sie Tools zum Maskieren sensibler Texte, Finden von PII, Normalisieren von Telefonnummern, Hervorheben von Phrasen, Zentrieren von Text und Formatieren von Diffs in einem Hub.