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.

Tailwind Arbitrary-Value Playground | Kostenloses Online-Tool

Beispiele

1. Layout-Größen und Farbverläufe testen

Frontend-Entwickler

Hintergrund

Ein Entwickler möchte ein Layout mit einer dynamischen Höhe und einem benutzerdefinierten Farbverlauf erstellen, ohne das globale Tailwind-Theme anzupassen.

Aufgabe

Die genaue CSS-Ausgabe von komplexen calc()-Funktionen und Gradienten-Klassen muss überprüft werden.

Verwendung

Geben Sie die Klassen w-[137px], h-[calc(100vh-4rem)] und bg-[linear-gradient(90deg,#6366f1,#8b5cf6)] in das Eingabefeld ein und aktivieren Sie die Live-Vorschau.

classes: "w-[137px]\nh-[calc(100vh-4rem)]\nbg-[linear-gradient(90deg,#6366f1,#8b5cf6)]", outputFormat: "expanded"

Ergebnis

Das Tool generiert das erweiterte CSS mit den berechneten Werten und zeigt eine visuelle Vorschau des Farbverlaufs an.

2. Grid-Layouts und Arbitrary Properties validieren

UI-Designer & Developer

Hintergrund

Für ein komplexes Dashboard-Raster wird ein dreispaltiges Grid benötigt, das nicht in den Standard-Utilities enthalten ist.

Aufgabe

Sicherstellen, dass die Unterstrich-Syntax für Leerzeichen in Grid-Templates korrekt in CSS übersetzt wird.

classes: "grid-cols-[1fr_2fr_1fr]\n[mask-type:luminance]", outputFormat: "compressed"

Tailwind Arbitrary-Value Playground | Kostenloses Online-Tool | Elysia Tools

Tailwind Arbitrary-Value Playground

Wobei dieses Tool hilft

Dieses Tool ausführen

Vorbereitete Beispielausführungen

Eingaben

Ergebnis

Vorbereitete Beispielausführungen

Eingaben

Ergebnis

Beispiele zu diesem Tool

Mit verwandten Tools und Themen fortfahren

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. Layout-Größen und Farbverläufe testen

2. Grid-Layouts und Arbitrary Properties validieren

FAQ

Tailwind CSS Samples

MP3 Audio-Beispiele ohne Urheberrechte

SVG Beispiele

Android Java Bildverarbeitungsbeispiele

VP8-Bildanalysator

Wasserfall-Diagramm-Generator

Barrierefreiheits-Auditbericht-Generator

CSV-Splitter

Textfall-, Encoding- und Normalisierungs-Konvertierungs-Tools

Text-Tools

Textanalyse-, Lesbarkeits- und Inhaltsinspektions-Tools

Text-Redaktions-, Hervorhebungs- und Darstellungsformatierungs-Tools