Tailwind Játszótér
Írj HTML-t Tailwind CSS v4 osztályokkal, és fordítsd élőben a böngészőben.
Mi a Tailwind Játszótér?
Ingyenes, böngészőben futó szerkesztő, amelyben Tailwind CSS v4 segédosztályokkal írsz HTML-t, és az élő előnézetben látod a lefordított eredményt. A hivatalos Tailwind v4 böngészőfordító be van építve az oldalba, semmit nem kell telepíteni.
Feltöltésre kerül a kódom?
Nem. A fordítás teljes egészében a böngésződben történik, a Tailwind motor helyben csomagolt példányával. A HTML-ed soha nem hagyja el az oldalt, a vázlatok csak a böngésző localStorage-ában tárolódnak.
Melyik Tailwind verziót használja?
A Tailwind CSS v4-et, a legújabb főverziót, a hivatalos @tailwindcss/browser fordítóval. Az összes alap segédosztály, variáns és az alapértelmezett téma működik, beleértve a szögletes zárójelben megadott tetszőleges értékeket.
Hogyan működik az élő előnézet?
A HTML-ed a fordítóval együtt egy elkülönített iframe-be kerül. Minden szerkesztés után 500 ezredmásodperc szünettel újrafordulnak a segédosztályok, így a gépelés gördülékeny és az előnézet mindig friss.
Hogyan tesztelem a sötét mód stílusait?
Kapcsold be a „Sötét előnézet” kapcsolót. Ez hozzáadja a "dark" osztályt az előnézeti dokumentumhoz, a fordító pedig a dark: variánst ehhez az osztályhoz köti, így a dark:bg-slate-900 féle osztályok azonnal működnek.
Láthatom a Tailwind által generált CSS-t?
Igen. A szerkesztők alatti „Lefordított CSS” panel pontosan azt a stíluslapot mutatja, amelyet a fordító a markup-odhoz készített, a „CSS másolása” gomb pedig a vágólapra teszi.
Mit tartalmaz a letöltött HTML?
A HTML letöltése gomb önálló fájlt készít: a markup-od mellé a lefordított CSS-t az head-be ágyazva. Az oldal így CDN-link és internet nélkül, offline is helyesen jelenik meg.
Vannak kezdősablonok?
Igen. A sablonválasztó hero szekciót, reszponzív kártyarácsot és három szintű ártáblázatot kínál – mind aktuális v4 osztályokkal –, plusz egy minimális üres kiindulópontot.
A(z) Tailwind Játszótér használata
Ez a játszótér teljesen a gépén futtatja a Tailwind CSS v4 hivatalos böngészőfordítóját. Balra egyszerű HTML-t ír utility osztályokkal, a fordító a megfelelő CSS-t egy elszigetelt előnézeti iframe-ben generálja, alatta pedig egy panel mutatja a pontosan előállított stíluslapot. Semmi nem töltődik fel: a fordító, a jelölése és a vázlatai mind a böngészőben maradnak.
- Válasszon kiindulópontot a Sablon választóból: Hero, kártyarács, ártáblázat vagy Üres; a szövege a látogatások között automatikusan helyre is áll.
- Szerkessze a HTML-t a bal oldali szerkesztőben. A Tab megnyomása két szóközt szúr be, és a gépelés befejezése után kb. 500 ms-mal az előnézet újrafordul.
- Kapcsolja a Puha tördelést a sortörés irányításához, és a betűméret választót a szerkesztő szövegméretének beállításához.
- Kapcsolja be a Sötét előnézetet, hogy a "dark" osztály hozzáadódjon az előnézeti dokumentumhoz; a dark:bg-slate-900-féle utility-k azonnal reagálnak.
- Olvassa el a generált szabályokat a Fordított CSS panelen, és szükség esetén másolja ki a CSS másolása gombbal.
- A nyers jelöléshez használja a HTML másolása gombot, vagy a HTML letöltése gombot egy önálló fájlhoz a beágyazott, fordított CSS-sel — offline megnyitásra kész.
A letöltés csak legalább egy fordítás után tartalmaz valódi stílusokat, ezért exportálás előtt hagyja az előnézetet egyszer kirajzolódni. A generált CSS kicsinyítéséhez törölje a sablonból a nem használt elemeket — a panel mindig pontosan tükrözi, mire van szüksége az aktuális jelölésének.
Kapcsolódó eszközök
- Kód-játszótér Online HTML, CSS és JavaScript játszótér élő előnézettel, sorszámozott szerkesztővel és rögzített konzollal. Teszteld a kódrészleteket azonnal, és töltsd le az eredményt egyetlen HTML fájlként - teljesen a böngésződben.
- CSS Grid generátor Ingyenes vizuális CSS Grid generátor élő előnézettel. Tervezzen reszponzív rácsos elrendezéseket interaktívan, és exportáljon kész CSS kódot azonnal.
- Chmod-számológép Ingyenes online chmod-számológép a Linux fájljogosultságok vizualizálásához és számításához jelölőnégyzetekkel. Azonnali átváltás numerikus (755, 644) és szimbolikus jelölés (rwxr-xr-x) között. Támogatja a különleges jogosultságokat mint setuid, setgid, sticky bit.
- ASCII Táblázat Teljes ASCII karakterkódolási referencia tizes, tizenhatos, nyolcas, kettes számrendszerbeli kódokkal, HTML entitásokkal és karakterleírásokkal. Azonnali keresés és szűrés.
- HTTP Kérés Tesztelő Tesztelje a REST API-kat közvetlenül a böngészőben. Küldjön GET, POST, PUT, DELETE kéréseket egyedi fejlécekkel, törzzsel és paraméterekkel. Azonnal láthatja a válasz állapotát, fejléceit és JSON törzsét.
- .htaccess generátor Apache .htaccess szabályok generálása átirányításokhoz, újraírásokhoz, biztonsági fejlécekhez, gyorsítótárazáshoz és egyebekhez.
- Robots.txt Generátor Ingyenes online robots.txt generátor. Hozzon létre és szabjon testre robots.txt fájlokat a keresőmotorok mászásának szabályozására, a mászók hozzáférésének kezelésére és weboldala SEO optimalizálására.
- Sitemap Generátor Ingyenes online XML sitemap generátor. Adjon hozzá URL-eket, állítson be prioritásokat és gyakoriságokat, készítsen SEO sitemapokat azonnal.