Tailwind Hřiště
Pište HTML s utilitami Tailwind CSS v4 a kompilujte v reálném čase v prohlížeči.
Co je Tailwind Hřiště?
Bezplatný editor přímo v prohlížeči, ve kterém píšete HTML s utilitami Tailwind CSS v4 a výsledek kompilace sledujete v živém náhledu. Oficiální prohlížečový kompilátor Tailwind v4 je přímo v stránce, nic není potřeba instalovat.
Je můj kód někam nahráván?
Ne. Kompilace probíhá zcela ve vašem prohlížeči s lokálně zabudovanou kopií enginu Tailwind. Váš HTML nikdy neopustí stránku a koncepty se ukládají jen do localStorage prohlížeče.
Která verze Tailwind se používá?
Tailwind CSS v4, nejnovější hlavní verze, přes oficiální kompilátor @tailwindcss/browser. Fungují všechny základní utility, varianty i výchozí téma, včetně libovolných hodnot v hranatých závorkách.
Jak funguje živý náhled?
Váš HTML se spolu s kompilátorem vkládá do izolovaného iframe. Po každé úpravě se utility překompilují po pauze 500 milisekund, takže psaní zůstává plynulé a náhled aktuální.
Jak otestuji styly tmavého režimu?
Zapněte přepínač „Tmavý náhled“. Ten přidá do dokumentu náhledu třídu "dark" a kompilátor mapuje variantu dark: na tuto třídu, takže utility jako dark:bg-slate-900 reagují okamžitě.
Můžu vidět CSS, které Tailwind generuje?
Ano. Panel „Zkompilované CSS“ pod editory ukazuje přesně ten styl, který kompilátor vytvořil pro váš markup, a tlačítko „Kopírovat CSS“ ho zkopíruje do schránky.
Co obsahuje stažený HTML?
Tlačítko Stáhnout HTML vytvoří samostatný soubor s vaším markupem a zkompilovaným CSS vloženým do hlavičky. Stránka se pak správně zobrazí offline, bez CDN odkazů a bez internetu.
Jsou k dispozici výchozí šablony?
Ano. Výběr šablon nabízí sekci hero, mřížku karet responzivní a tři cenové úrovně – vše psané aktuálními utilitami v4 – plus minimální prázdný start.
Jak používat Tailwind Hřiště
Toto hřiště spouští oficiální prohlížečový kompilátor Tailwind CSS v4 zcela na vašem stroji. Vlevo píšete prosté HTML s utilitními třídami, kompilátor generuje odpovídající CSS uvnitř izolovaného náhledového iframu a panel dole ukazuje přesně vzniklý stylesheet. Nic se nenahrává: kompilátor, vaše značky i koncepty zůstávají v prohlížeči.
- Zvolte výchozí bod ve volbě Šablona: Hero, mřížka karet, ceník nebo Prázdná; váš text se mezi návštěvami také automaticky obnovuje.
- Upravujte HTML v levém editoru. Stisk Tabu vloží dvě mezery a náhled se rekompiluje zhruba 500 ms po přestání psát.
- Přepínejte Měkké zalamování pro řízení lámání řádků a volič velikosti písma pro nastavení velikosti textu editoru.
- Zapněte Tmavý náhled, aby se do náhledového dokumentu přidala třída "dark"; utility jako dark:bg-slate-900 reagují okamžitě.
- Čtěte vygenerovaná pravidla v panelu Kompilované CSS a kopírujte je tlačítkem Kopírovat CSS, když je potřebujete.
- Použijte Kopírovat HTML pro surové značky, nebo Stáhnout HTML, abyste dostali samostatný soubor s vloženým kompilovaným CSS, připravený k otevření offline.
Stažený soubor obsahuje skutečné styly až po nejméně jedné kompilaci, takže nechte náhled jednou vykreslit před exportem. Aby bylo generované CSS menší, smažte ze šablony nepoužívané prvky — panel vždy přesně odráží, co aktuální značky potřebují.
Související nástroje
- Hřiště pro kód Online hřiště pro HTML, CSS a JavaScript s živým náhledem, editorem s čísly řádků a zachycenou konzolí. Testujte úryvky okamžitě a výsledek si stáhněte jako jeden soubor HTML - celé ve vašem prohlížeči.
- Generátor CSS Grid Bezplatný vizuální generátor CSS Grid s živým náhledem. Interaktivně navrhujte responzivní mřížková rozvržení a exportujte produkční CSS kód.
- Kalkulačka Chmod Bezplatný online kalkulačka chmod pro vizualizaci a výpočet oprávnění souborů Linux pomocí zaškrtávacích polí. Okamžitá konverze mezi číselnou (755, 644) a symbolickou notací (rwxr-xr-x). Podporuje speciální oprávnění jako setuid, setgid, sticky bit.
- ASCII Tabulka Kompletní reference kódování znaků ASCII s desítkovými, hexadecimálními, osmičkovými, binárními kódy, HTML entitami a popisy znaků. Okamžité vyhledávání a filtrování.
- Tester HTTP požadavků Testujte REST API přímo v prohlížeči. Odesílejte požadavky GET, POST, PUT, DELETE s vlastními hlavičkami, tělem a parametry. Okamžitě vidíte stav, hlavičky a JSON tělo odpovědi.
- Generátor .htaccess Generujte pravidla Apache .htaccess pro přesměrování, přepisy, bezpečnostní hlavičky, mezipaměť a další.
- Generátor Robots.txt Bezplatný online generátor robots.txt. Vytvářejte a přizpůsobujte soubory robots.txt pro řízení procházení vyhledávači, správu přístupu prohledávačů a optimalizaci SEO vašeho webu.
- Generátor Sitemap Bezplatný online generátor XML sitemap. Přidávejte URL, nastavujte priority a frekvence, vytvářejte SEO sitemapy okamžitě.