Tailwind Speeltuin
Schrijf HTML met Tailwind CSS v4-utilities en compileer live in je browser.
Wat is de Tailwind Speeltuin?
Een gratis editor in je browser waarin je HTML schrijft met Tailwind CSS v4-utilityklassen en het gecompileerde resultaat live ziet. De officiële Tailwind v4-browsercompiler zit in de pagina ingebouwd, dus niets te installeren.
Wordt mijn code ergens geüpload?
Nee. De compilatie gebeurt volledig in je browser met een lokaal gebundelde kopie van de Tailwind-engine. Je HTML verlaat de pagina nooit en concepten worden alleen opgeslagen in de localStorage van je browser.
Welke Tailwind-versie wordt gebruikt?
Tailwind CSS v4, de nieuwste hoofversie, via de officiële compiler @tailwindcss/browser. Alle kern-utilities, varianten en het standaardthema werken, inclusief willekeurige waarden tussen vierkante haken.
Hoe werkt de live preview?
Je HTML wordt samen met de compiler in een afgeschermde iframe geïnjecteerd. Na elke wijziging worden de utilities na een pauze van 500 milliseconden opnieuw gecompileerd: typen blijft soepel en de preview blijft actueel.
Hoe test ik donkere stijlen?
Zet de schakelaar «Donkere preview» aan. Die voegt de klasse "dark" toe aan het previewdocument en de compiler koppelt de dark:-variant aan die klasse, zodat utilities zoals dark:bg-slate-900 direct reageren.
Kan ik de CSS zien die Tailwind genereert?
Ja. Het paneel «Gecompileerde CSS» onder de editors toont precies de stylesheet die de compiler voor je markup maakte, en de knop «CSS kopiëren» zet die op je klembord.
Wat bevat de gedownloade HTML?
De knop HTML downloaden maakt een zelfstandig bestand met je markup plus de gecompileerde CSS inline in de head: de pagina rendert correct offline, zonder CDN-link en zonder internet.
Zijn er startsjablonen?
Ja. De sjabloonkiezer biedt een hero-sectie, een responsief kaartenraster en een drietrapsprijslijst, allemaal met huidige v4-utilities, plus een minimaal leeg startpunt.
Hoe Tailwind Speeltuin te gebruiken
Deze speeltuin draait de officiële Tailwind CSS v4-browsercompiler volledig op jouw machine. Je typt links gewoon HTML met utility-klassen, de compiler genereert de bijpassende CSS in een geïsoleerde voorbeeld-iframe, en een paneel eronder toont de exacte geproduceerde stylesheet. Er wordt niets geüpload: de compiler, je opmaak en je concepten blijven allemaal in de browser.
- Kies een startpunt in de Sjabloon-keuze: Hero, kaartenraster, prijstabel of Leeg; je tekst wordt ook automatisch hersteld tussen bezoeken.
- Bewerk de HTML in de linker editor. Tab voegt twee spaties in, en de voorbeeldweergave hercompileert ongeveer 500 ms nadat je stopt met typen.
- Schakel Zacht afbreken om om de regeleinde te sturen, en de lettergrootte-keuze om de tekstgrootte van de editor vast te stellen.
- Zet Donkere voorbeeldweergave aan om de klasse "dark" aan het voorbeelddocument toe te voegen; utilities zoals dark:bg-slate-900 reageren onmiddellijk.
- Lees de gegenereerde regels in het paneel Gecompileerde CSS en kopieer ze met CSS kopiëren wanneer je ze nodig hebt.
- Gebruik HTML kopiëren voor de ruwe opmaak, of HTML downloaden om een zelfstandig bestand te krijgen met de gecompileerde CSS ingebed, klaar om offline te openen.
De download bevat pas echte stijlen na ten minste één compilatie, dus laat de voorbeeldweergave eenmaal renderen voordat je exporteert. Om de gegenereerde CSS te verkleinen, verwijder ongebruikte elementen uit de sjabloon — het paneel weerspiegelt altijd precies wat je huidige opmaak nodig heeft.
Gerelateerde tools
- Code-speeltuin Online HTML-, CSS- en JavaScript-speeltuin met live voorbeeld, editor met regelnummers en vastgelegde console. Test snippets direct en download het resultaat als één HTML-bestand - volledig in je browser.
- CSS Grid Generator Gratis visuele CSS Grid-generator met live preview. Ontwerp interactief responsieve grid-lay-outs en exporteer direct productieklare CSS-code.
- Chmod-calculator Gratis online chmod-calculator om Linux-bestandsrechten te visualiseren en berekenen met selectievakjes. Converteer direct tussen numerieke (755, 644) en symbolische notatie (rwxr-xr-x). Ondersteunt speciale rechten zoals setuid, setgid, sticky bit.
- ASCII-tabel Volledige ASCII-tekencoderingreferentie met decimale, hexadecimale, octale, binaire codes, HTML-entiteiten en karakterbeschrijvingen. Direct zoeken en filteren.
- HTTP-verzoek Tester Test REST API's direct in je browser. Verstuur GET-, POST-, PUT-, DELETE-verzoeken met aangepaste headers, body en parameters. Bekijk responsstatus, headers en JSON-body direct.
- .htaccess-generator Genereer Apache .htaccess-regels voor redirects, herschrijvingen, beveiligingsheaders, caching en meer.
- Robots.txt Generator Gratis online robots.txt generator. Maak en pas robots.txt bestanden aan om het crawlen van zoekmachines te beheren, crawler-toegang te beheren en de SEO van uw site te optimaliseren.
- Sitemap Generator Gratis online XML sitemap generator. Voeg URLs toe, stel prioriteiten en frequenties in, maak direct SEO-sitemaps.