Tailwind Værksted
Skriv HTML med Tailwind CSS v4-klasser og kompilér live i browseren.
Hvad er Tailwind Værksted?
En gratis editor i browseren, hvor du skriver HTML med Tailwind CSS v4-værktøjsklasser og ser det kompilerede resultat i en live forhåndsvisning. Den officielle Tailwind v4-browserkompiler er indbygget i siden, intet behøver installeres.
Bliver min kode uploadet et sted?
Nej. Kompileringen sker helt i din browser med en lokalt bundtet kopi af Tailwind-motoren. Din HTML forlader aldrig siden, og udkast gemmes kun i browserens localStorage.
Hvilken Tailwind-version bruges?
Tailwind CSS v4, den nyeste hovedversion, via den officielle kompilator @tailwindcss/browser. Alle kerneklasser, varianter og standardtemaet virker, inklusive vilkårlige værdier i firkantparenteser.
Hvordan fungerer live forhåndsvisningen?
Din HTML indsprøjtes i en isoleret iframe sammen med kompilatoren. Efter hver redigering kompileres klasserne igen efter en pause på 500 millisekunder, så skrivning forbliver smidig og forhåndsvisningen opdateret.
Hvordan tester jeg mørke stilarter?
Slå kontakten «Mørk forhåndsvisning» til. Den tilføjer klassen "dark" til forhåndsvisningsdokumentet, og kompilatoren kobler varianten dark: til den klasse, så klasser som dark:bg-slate-900 virker med det samme.
Kan jeg se den CSS, Tailwind genererer?
Ja. Panelet «Kompileret CSS» under editorene viser præcis det stylesheet, kompilatoren lavede til dit markup, og knappen «Kopiér CSS» lægger det på udklipsholderen.
Hvad indeholder den downloadede HTML?
Knappen Download HTML laver en selvstændig fil med dit markup plus den kompilerede CSS inlejret i head. Siden vises da korrekt offline, uden CDN-links og uden internet.
Er der startskabeloner?
Ja. Skabelonvælgeren tilbyder en hero-sektion, et responsivt kortgitter og en pristabel med tre niveauer – alle skrevet med aktuelle v4-klasser – plus et minimalt tomt udgangspunkt.
Sådan bruges Tailwind Værksted
Dette værksted kører den officielle Tailwind CSS v4-browserkompilator helt på din maskine. Du skriver almindelig HTML med utility-klasser til venstre, kompilatoren genererer matchende CSS i en sandkasse-isoleret preview-iframe, og et panel nedenunder viser den nøjagtige fremstillede stylesheet. Intet uploades: kompilatoren, din markup og dine udkast bliver alle i browseren.
- Vælg et startpunkt i Skabelon-vælgeren: Hero, kortgitter, pristabel eller Tom; din tekst gendannes også automatisk mellem besøg.
- Redigér HTML i den venstre editor. At trykke Tab indsætter to mellemrum, og forhåndsvisningen rekompileres cirka 500 ms efter, du er holdt op med at skrive.
- Skift Blød ombrydning for at styre linjeskift, og skriftstørrelsesvælgeren til at indstille editorens tekststørrelse.
- Slå Mørk forhåndsvisning til for at tilføje klassen "dark" til forhåndsvisningsdokumentet; utilities som dark:bg-slate-900 reagerer straks.
- Læs de genererede regler i panelet Kompileret CSS og kopiér dem med Kopiér CSS, når du har brug for dem.
- Brug Kopiér HTML til rå markup, eller Download HTML for at få en selvstændig fil med den kompilerede CSS indlejret, klar til at åbnes offline.
Downloaden har kun rigtige stilarter efter mindst én kompilering, så lad forhåndsvisningen rendere én gang, inden du eksporterer. For at gøre den genererede CSS mindre, slet ubrugte elementer fra skabelonen — panelet afspejler altid præcis, hvad din nuværende markup behøver.
Relaterede værktøjer
- Kodelegeplads Online-legeplads til HTML, CSS og JavaScript med live forhåndsvisning, editor med linjenumre og fanget konsol. Test kodestykker med det samme og download resultatet som én HTML-fil - helt i din browser.
- CSS Grid-generator Gratis visuel CSS Grid-generator med live forhåndsvisning. Design responsive grid-layouts interaktivt og eksporter produktionsklar CSS-kode direkte.
- Chmod-beregner Gratis online chmod-beregner til at visualisere og beregne Linux-filrettigheder med afkrydsningsfelter. Konverter straks mellem numerisk (755, 644) og symbolsk notation (rwxr-xr-x). Understøtter specielle rettigheder som setuid, setgid, sticky bit.
- ASCII-tabel Komplet ASCII-tegnkodningsreference med decimal-, hex-, oktal-, binærkoder, HTML-entiteter og tegnbeskrivelser. Øjeblikkelig søgning og filtrering.
- HTTP-anmodning Tester Test REST API'er direkte i din browser. Send GET-, POST-, PUT-, DELETE-anmodninger med brugerdefinerede headers, body og parametre. Se svarstatus, headers og JSON-body øjeblikkeligt.
- .htaccess-generator Generer Apache .htaccess-regler for omdirigeringer, omskrivninger, sikkerhedshoveder, caching og mere.
- Robots.txt Generator Gratis online robots.txt generator. Opret og tilpas robots.txt-filer til at styre søgemaskinens crawling, administrere crawler-adgang og optimere dit websteds SEO.
- Sitemap Generator Gratis online XML sitemap generator. Tilføj URL'er, angiv prioriteter og frekvenser, opret SEO-sitemaps med det samme.