Tailwind Sandkasse
Skriv HTML med Tailwind CSS v4-klasser og kompiler live i nettleseren.
Hva er Tailwind Sandkasse?
En gratis editor i nettleseren der du skriver HTML med Tailwind CSS v4-verktøyklasser og ser det kompilerte resultatet i en live forhåndsvisning. Den offisielle Tailwind v4-nettleserkompilatoren er innebygd i siden, ingenting trenger installeres.
Blir koden min lastet opp noe sted?
Nei. Kompileringen skjer helt i nettleseren din med en lokalt buntet kopi av Tailwind-motoren. HTML-en din forlater aldri siden, og utkast lagres bare i nettleserens localStorage.
Hvilken Tailwind-versjon brukes?
Tailwind CSS v4, den nyeste hovedversjonen, via den offisielle kompilatoren @tailwindcss/browser. Alle kjernklassene, variantene og standardtemaet fungerer, inkludert vilkårlige verdier i hakeparenteser.
Hvordan fungerer live forhåndsvisning?
HTML-en din injiseres i en isolert iframe sammen med kompilatoren. Etter hver redigering kompileres klassene på nytt etter en pause på 500 millisekunder, så skriving forblir flytende og forhåndsvisningen oppdatert.
Hvordan tester jeg mørke stiler?
Slå på bryteren «Mørk forhåndsvisning». Den legger til klassen "dark" i forhåndsvisningsdokumentet, og kompilatoren knytter varianten dark: til den klassen, så klasser som dark:bg-slate-900 virker med en gang.
Kan jeg se CSS-en Tailwind genererer?
Ja. Panelet «Kompilert CSS» under editorene viser nøyaktig stilarket kompilatoren laget for markeringen din, og knappen «Kopier CSS» legger det på utklippstavlen.
Hva inneholder den nedlastede HTML-en?
Knappen Last ned HTML lager en frittstående fil med markeringen din pluss den kompilerte CSS-en inlinet i head. Siden vises da riktig offline, uten CDN-lenker og uten internett.
Finnes det startmaler?
Ja. Malvelgeren tilbyr en hero-seksjon, et responsivt kortrutenett og en pristabell med tre nivåer – alle skrevet med gjeldende v4-klasser – pluss et minimalt tomt startpunkt.
Slik bruker du Tailwind Sandkasse
Denne sandkassen kjører den offisielle Tailwind CSS v4-nettleserkompilatoren helt på maskinen din. Du skriver enkel HTML med utility-klasser til venstre, kompilatoren genererer matchende CSS i en sandkasse-isolert forhåndsvisnings-iframe, og et panel under viser den eksakte produserte stilarket. Ingenting lastes opp: kompilatoren, markeringen din og utkastene dine blir alle i nettleseren.
- Velg startpunkt i Mal-velgeren: Hero, kortrutenett, pristabell eller Tom; teksten din gjenopprettes også automatisk mellom besøk.
- Rediger HTML i venstre editor. Å trykke Tab setter inn to mellomrom, og forhåndsvisningen rekompileres cirka 500 ms etter at du slutter å skrive.
- Veksle Myk linjebryting for å styre linjeskift, og skriftstørrelsesvelgeren for å sette tekststørrelsen i editoren.
- Slå på Mørk forhåndsvisning for å legge til klassen "dark" i forhåndsvisningsdokumentet; utilities som dark:bg-slate-900 reagerer umiddelbart.
- Les de genererte reglene i panelet Kompilert CSS og kopier dem med Kopier CSS når du trenger dem.
- Bruk Kopier HTML for rå markering, eller Last ned HTML for å få en selvstendig fil med den kompilerte CSS-en innbakt, klar til å åpnes frakoblet.
Nedlastingen har bare ekte stiler etter minst én kompilering, så la forhåndsvisningen rendres én gang før du eksporterer. For å redusere den genererte CSS-en, slett ubrukte elementer fra malen — panelet speiler alltid nøyaktig hva markeringen din trenger nå.
Relaterte verktøy
- Kode-lekeplass Online lekeplass for HTML, CSS og JavaScript med forhåndsvisning i sanntid, editor med linjenumre og fanget konsoll. Test kodebiter umiddelbart og last ned resultatet som én HTML-fil - helt i nettleseren.
- CSS Grid-generator Gratis visuell CSS Grid-generator med live forhåndsvisning. Design responsive grid-layouter interaktivt og eksporter produksjonsklar CSS-kode direkte.
- Chmod-kalkulator Gratis online chmod-kalkulator for å visualisere og beregne Linux-filrettigheter med avmerkingsbokser. Konverter umiddelbart mellom numerisk (755, 644) og symbolsk notasjon (rwxr-xr-x). Støtter spesielle rettigheter som setuid, setgid, sticky bit.
- ASCII-tabell Komplett ASCII-tegnkodingsreferanse med desimale, heksadesimale, oktale, binære koder, HTML-enheter og tegnbeskrivelser. Umiddelbar søk og filtrering.
- HTTP-forespørsel Tester Test REST API-er direkte i nettleseren. Send GET-, POST-, PUT-, DELETE-forespørsler med egendefinerte headere, kropp og parametere. Se svarstatus, headere og JSON-kropp umiddelbart.
- .htaccess-generator Generer Apache .htaccess-regler for omdirigeringer, omskrivinger, sikkerhetshoder, bufring og mer.
- Robots.txt Generator Gratis online robots.txt generator. Opprett og tilpass robots.txt-filer for å kontrollere søkemotorenes crawling, administrere crawler-tilgang og optimalisere nettstedets SEO.
- Sitemap Generator Gratis online XML sitemap generator. Legg til URL-er, angi prioriteringer og frekvenser, lag SEO-sitemaps umiddelbart.