Tailwind Spielwiese
Schreibe HTML mit Tailwind-CSS-v4-Utilities und kompiliere live im Browser.
Was ist die Tailwind Spielwiese?
Ein kostenloser Editor im Browser, in dem du HTML mit Tailwind-CSS-v4-Utilities schreibst und das kompilierte Ergebnis in einer Live-Vorschau siehst. Der offizielle Tailwind-v4-Browser-Compiler ist direkt in die Seite eingebaut.
Wird mein Code hochgeladen?
Nein. Die Kompilierung läuft vollständig in deinem Browser mit einer lokal gebündelten Kopie der Tailwind-Engine. Dein HTML verlässt die Seite nie, Entwürfe liegen nur im localStorage des Browsers.
Welche Tailwind-Version wird verwendet?
Tailwind CSS v4, die aktuelle Hauptversion, mit dem offiziellen Compiler @tailwindcss/browser. Alle Kern-Utilities, Varianten und das Standard-Theme funktionieren, einschließlich beliebiger Werte in eckigen Klammern.
Wie funktioniert die Live-Vorschau?
Dein HTML wird zusammen mit dem Compiler in einen isolierten iframe injiziert. Nach jeder Eingabe werden die Utilities nach 500 Millisekunden Pause neu kompiliert – flüssiges Tippen und aktuelle Vorschau zugleich.
Wie teste ich Dark-Mode-Stile?
Aktiviere den Schalter „Dunkle Vorschau“. Er setzt die Klasse "dark" im Vorschaudokument, und der Compiler mappt die dark:-Variante auf diese Klasse, sodass Utilities wie dark:bg-slate-900 sofort reagieren.
Kann ich das von Tailwind erzeugte CSS sehen?
Ja. Das Panel „Kompiliertes CSS“ unter den Editoren zeigt genau das Stylesheet, das der Compiler für dein Markup erzeugt hat; die Schaltfläche „CSS kopieren“ legt es in die Zwischenablage.
Was enthält die heruntergeladene HTML-Datei?
Der Button „HTML herunterladen“ erzeugt eine eigenständige Datei mit deinem Markup plus dem kompilierten CSS im head. Die Seite rendert damit korrekt offline – ganz ohne CDN-Link oder Internet.
Gibt es Startvorlagen?
Ja. Der Vorlagenwähler bietet einen Hero-Bereich, ein responsives Kartenraster und eine Preistabelle mit drei Stufen – alle mit aktuellen v4-Utilities – plus einen minimalistischen leeren Start.
So verwenden Sie Tailwind Spielwiese
Diese Spielwiese führt den offiziellen Tailwind-CSS-v4-Browser-Compiler vollständig auf deiner Maschine aus. Du tippst links schlichtes HTML mit Utility-Klassen, der Compiler erzeugt das passende CSS in einem abgeschotteten Vorschau-Iframe, und ein Panel darunter zeigt das exakt erzeugte Stylesheet. Nichts wird hochgeladen: Compiler, dein Markup und deine Entwürfe bleiben alle im Browser.
- Wähle im Vorlagen-Auswahlfeld einen Startpunkt: Hero, Kartenraster, Preistabelle oder Leer; dein Text wird zwischen Besuchen auch automatisch wiederhergestellt.
- Bearbeite das HTML im linken Editor. Tab fügt zwei Leerzeichen ein, und die Vorschau kompiliert etwa 500 ms nach dem Tippen neu.
- Schalte Weicher Umbruch um, um den Zeilenumbruch zu steuern, und den Schriftgrößen-Wähler, um die Editor-Textgröße festzulegen.
- Schalte Dunkle Vorschau ein, um dem Vorschau-Dokument die Klasse "dark" hinzuzufügen; Utilities wie dark:bg-slate-900 reagieren sofort.
- Lies die erzeugten Regeln im Panel Kompiliertes CSS und kopiere sie bei Bedarf mit CSS kopieren.
- Nutze HTML kopieren für das rohe Markup, oder HTML herunterladen, um eine eigenständige Datei mit eingebettetem, kompiliertem CSS zu bekommen — bereit zum Offline-Öffnen.
Der Download enthält erst nach mindestens einer Kompilierung echte Stile, lass die Vorschau also einmal rendern, bevor du exportierst. Um das erzeugte CSS zu verkleinern, lösche ungenutzte Elemente aus der Vorlage — das Panel spiegelt immer genau, was dein aktuelles Markup braucht.
Verwandte Tools
- Code-Spielwiese Online-HTML-, CSS- und JavaScript-Spielwiese mit Live-Vorschau, Editor mit Zeilennummern und abgefangener Konsole. Snippets sofort testen und das Ergebnis als HTML-Datei herunterladen - komplett im Browser.
- CSS Grid Generator Kostenloser visueller CSS Grid Generator mit Live-Vorschau. Gestalten Sie responsive Grid-Layouts interaktiv und exportieren Sie produktionsreifen CSS-Code.
- Chmod-Rechner Kostenloser Online-Chmod-Rechner zur Visualisierung und Berechnung von Linux-Dateiberechtigungen mit Kontrollkästchen. Sofortige Umwandlung zwischen numerischer (755, 644) und symbolischer Notation (rwxr-xr-x). Unterstützt Sonderberechtigungen wie setuid, setgid, sticky bit.
- ASCII-Tabelle Vollständige ASCII-Zeichencodierungsreferenz mit Dezimal-, Hexadezimal-, Oktal-, Binärcodes, HTML-Entities und Beschreibungen. Sofortige Suche und Filterung.
- HTTP-Anfrage-Tester Testen Sie REST-APIs direkt im Browser. Senden Sie GET-, POST-, PUT-, DELETE-Anfragen mit benutzerdefinierten Headern, Body und Parametern. Sehen Sie sofort Status, Header und JSON-Body.
- .htaccess-Generator Generieren Sie Apache .htaccess-Regeln für Weiterleitungen, Umschreibungen, Sicherheitsheader, Caching und mehr.
- Robots.txt Generator Kostenloser Online-robots.txt-Generator. Erstellen und passen Sie robots.txt-Dateien an, um das Crawling von Suchmaschinen zu steuern, Crawler-Zugriff zu verwalten und die SEO Ihrer Website zu optimieren.
- Sitemap Generator Kostenloser Online-Sitemap-Generator. URLs hinzufügen, Prioritäten und Häufigkeiten setzen, SEO-Sitemaps sofort erstellen.