Tailwind Lekstuga
Skriv HTML med Tailwind CSS v4-klasser och kompilera live i webbläsaren.
Vad är Tailwind Lekstuga?
En gratis editor i webbläsaren där du skriver HTML med Tailwind CSS v4-verktygsklasser och ser det kompilerade resultatet i en liveförhandsvisning. Den officiella Tailwind v4-webbläsarkompilatorn är inbyggd i sidan, inget behöver installeras.
Laddas min kod upp någonstans?
Nej. Kompileringen sker helt i din webbläsare med en lokalt bundlad kopia av Tailwind-motorn. Din HTML lämnar aldrig sidan och utkast sparas bara i webbläsarens localStorage.
Vilken Tailwind-version används?
Tailwind CSS v4, den senaste huvudversionen, via den officiella kompilatorn @tailwindcss/browser. Alla kärnklasser, varianter och standardtemat fungerar, inklusive godtyckliga värden inom hakparenteser.
Hur fungerar liveförhandsvisningen?
Din HTML injiceras i en isolerad iframe tillsammans med kompilatorn. Efter varje redigering kompileras klasserna om efter ett uppehåll på 500 millisekunder, så skrivandet förblir smidigt och förhandsvisningen aktuell.
Hur testar jag mörka stilar?
Slå på växeln «Mörk förhandsvisning». Den lägger till klassen "dark" i förhandsvisningsdokumentet och kompilatorn kopplar varianten dark: till den klassen, så klasser som dark:bg-slate-900 slår till direkt.
Kan jag se CSS:en som Tailwind genererar?
Ja. Panelen «Kompilerad CSS» under editorna visar exakt den stilmall kompilatorn skapade för din markup, och knappen «Kopiera CSS» lägger den på urklipp.
Vad innehåller den nedladdade HTML:en?
Knappen Ladda ner HTML skapar en fristående fil med din markup plus den kompilerade CSS:en inbäddad i head. Sidan renderas då korrekt offline, utan CDN-länkar och utan internet.
Finns det startmallar?
Ja. Mallväljaren erbjuder en hero-sektion, ett responsivt kortrutnät och en pristabell med tre nivåer – alla med aktuella v4-klasser – plus en minimal tom startpunkt.
Hur man använder Tailwind Lekstuga
Denna lekstuga kör den officiella Tailwind CSS v4-webbläsarkompilatorn helt på din maskin. Du skriver enkel HTML med utility-klasser till vänster, kompilatorn genererar matchande CSS i en sandlådad förhandsgransknings-iframe, och en panel nedanför visar den exakta producerade stilmallen. Ingenting laddas upp: kompilatorn, din markup och dina utkast stannar alla i webbläsaren.
- Välj startpunkt i Mall-väljaren: Hero, kortrutnät, pristabell eller Tom; din text återställs även automatiskt mellan besök.
- Redigera HTML i den vänstra editorn. Att trycka Tab infogar två mellanslag, och förhandsgranskningen kompileras om cirka 500 ms efter att du slutat skriva.
- Växla Mjuk radbrytning för att styra radbrytning, och typsnittsstorleksväljaren för att ställa in editorns textstorlek.
- Slå på Mörk förhandsgranskning för att lägga till klassen "dark" i förhandsgranskningsdokumentet; utilities som dark:bg-slate-900 reagerar omedelbart.
- Läs de genererade reglerna i panelen Kompilerad CSS och kopiera dem med Kopiera CSS när du behöver dem.
- Använd Kopiera HTML för råmarkup, eller Ladda ner HTML för att få en fristående fil med den kompilerade CSS:n inbäddad, redo att öppnas offline.
Nedladdningen har bara riktiga stilar efter minst en kompilering, så låt förhandsgranskningen renderas en gång innan du exporterar. För att minska den genererade CSS:en, ta bort oanvända element från mallen — panelen speglar alltid exakt vad din nuvarande markup behöver.
Relaterade verktyg
- Kodlekplats Online-lekplats för HTML, CSS och JavaScript med liveförhandsvisning, editor med radnummer och fångad konsol. Testa kodsnuttar direkt och ladda ner resultatet som en enda HTML-fil - helt i webbläsaren.
- CSS Grid-generator Gratis visuell CSS Grid-generator med liveförhandsgranskning. Designa responsiva grid-layouter interaktivt och exportera produktionsklar CSS-kod direkt.
- Chmod-kalkylator Gratis online chmod-kalkylator för att visualisera och beräkna Linux-filrättigheter med kryssrutor. Konvertera omedelbart mellan numerisk (755, 644) och symbolisk notation (rwxr-xr-x). Stöder speciella rättigheter som setuid, setgid, sticky bit.
- ASCII-tabell Komplett ASCII-teckenkodningsreferens med decimala, hexadecimala, oktala, binära koder, HTML-entiteter och teckenbeskrivningar. Omedelbar sökning och filtrering.
- HTTP-begäran Testare Testa REST API:er direkt i din webbläsare. Skicka GET-, POST-, PUT-, DELETE-förfrågningar med anpassade rubriker, kropp och parametrar. Se svarstatus, rubriker och JSON-kropp omedelbart.
- .htaccess-generator Generera Apache .htaccess-regler för omdirigeringar, omskrivningar, säkerhetsrubriker, cachelagring och mer.
- Robots.txt Generator Gratis online robots.txt generator. Skapa och anpassa robots.txt-filer för att styra sökmotorernas crawlning, hantera crawler-åtkomst och optimera din webbplats SEO.
- Sitemap Generator Gratis online XML sitemap generator. Lägg till URL:er, ange prioriteringar och frekvenser, skapa SEO-sitemaps direkt.