Loc de Joacă Tailwind
Scrie HTML cu utilitare Tailwind CSS v4 și compilează live în browser.
Ce este Locul de Joacă Tailwind?
Un editor gratuit în browser în care scrii HTML cu clasele utilitare Tailwind CSS v4 și vezi rezultatul compilat într-o previzualizare live. Compilatorul oficial Tailwind v4 pentru browser este integrat în pagină, nu trebuie instalat nimic.
Codul meu este încărcat undeva?
Nu. Compilarea are loc integral în browserul tău, cu o copie locală a motorului Tailwind. HTML-ul tău nu părăsește niciodată pagina, iar schițele sunt salvate doar în localStorage-ul browserului.
Ce versiune Tailwind folosește?
Tailwind CSS v4, cea mai recentă versiune majoră, prin compilatorul oficial @tailwindcss/browser. Toate clasele de bază, variantele și tema implicită funcționează, inclusiv valorile arbitrare între paranteze pătrate.
Cum funcționează previzualizarea live?
HTML-ul tău este injectat într-un iframe izolat împreună cu compilatorul. După fiecare modificare, clasele sunt recompilate după o pauză de 500 de milisecunde, astfel că tastarea rămâne fluidă iar previzualizarea actualizată.
Cum testez stilurile pentru modul întunecat?
Activează comutatorul „Previzualizare întunecată”. Acesta adaugă clasa "dark" documentului de previzualizare, iar compilatorul leagă varianta dark: de clasa respectivă, deci clase precum dark:bg-slate-900 reacționează imediat.
Pot vedea CSS-ul generat de Tailwind?
Da. Panoul „CSS compilat” de sub editoare arată exact foaia de stiluri produsă de compilator pentru marcajul tău, iar butonul „Copiază CSS” o copiază în clipboard.
Ce conține HTML-ul descărcat?
Butonul Descarcă HTML produce un fișier autonom cu marcajul tău plus CSS-ul compilat încorporat în head. Pagina se afișează corect offline, fără linkuri CDN și fără internet.
Există șabloane de start?
Da. Selectorul de șabloane oferă o secțiune hero, o grilă de carduri responsivă și un tabel de prețuri cu trei niveluri – toate scrise cu clase v4 actuale – plus un punct de start gol minimal.
Cum se folosește Loc de Joacă Tailwind
Acest loc de joacă rulează integral pe mașina ta compilatorul de browser oficial Tailwind CSS v4. Scrii în stânga HTML simplu cu clase utilitare, compilatorul generează CSS-ul corespunzător în interiorul unui iframe de previzualizare izolat, iar un panou de dedesubt arată foaia de stil exactă produsă. Nimic nu este încărcat: compilatorul, marcajele tale și schițele tale rămân în browser.
- Alege un punct de plecare în selectorul de Șablon: Hero, grilă de carduri, tabel de prețuri sau Gol; textul tău este și el restaurat automat între vizite.
- Editează HTML-ul în editorul din stânga. Apăsarea Tab inserează două spații, iar previzualizarea se recompilează în jur de 500 ms după ce încetezi să scrii.
- Comută Rupere moale pentru a controla întreruperea liniilor, și selectorul de dimensiune a fontului pentru a stabili mărimea textului editorului.
- Pornește Previzualizare întunecată pentru a adăuga clasa "dark" documentului de previzualizare; utilitarele precum dark:bg-slate-900 reacționează instantaneu.
- Citește regulile generate în panoul CSS compilat și copiază-le cu Copiază CSS când ai nevoie.
- Folosește Copiază HTML pentru marcajul brut, sau Descarcă HTML pentru a primi un fișier autonom cu CSS-ul compilat inline, gata de deschis offline.
Descărcarea are stiluri reale doar după cel puțin o compilare, deci lasă previzualizarea să se randeze o dată înainte de export. Pentru a reduce CSS-ul generat, șterge din șablon elementele nefolosite — panoul reflectă întotdeauna exact ce are nevoie marcajul tău curent.
Instrumente conexe
- Loc de Joacă pentru Cod Loc de joacă online pentru HTML, CSS și JavaScript cu previzualizare live, editor cu numere de linii și consolă capturată. Testează fragmente instantaneu și descarcă rezultatul ca un singur fișier HTML - integral în browser.
- Generator CSS Grid Generator vizual gratuit CSS Grid cu previzualizare live. Proiectați layout-uri de grilă responsive interactiv și exportați cod CSS gata de producție.
- Calculator Chmod Calculator chmod online gratuit pentru vizualizarea și calcularea permisiunilor fișierelor Linux cu casete de selectare. Conversie instantanee între notația numerică (755, 644) și simbolică (rwxr-xr-x). Suportă permisiuni speciale precum setuid, setgid, sticky bit.
- Tabel ASCII Referință completă de codificare a caracterelor ASCII cu coduri zecimale, hexazecimale, octale, binare, entități HTML și descrieri de caractere. Căutare și filtrare instantanee.
- Testator Cereri HTTP Testați API-urile REST direct în browser. Trimiteți cereri GET, POST, PUT, DELETE cu antete, corp și parametri personalizați. Vedeți instantaneu starea, antetele și corpul JSON al răspunsului.
- Generator .htaccess Generați reguli .htaccess Apache pentru redirecționări, rescrieri, antete de securitate, cache și altele.
- Generator Robots.txt Generator gratuit online de robots.txt. Creați și personalizați fișiere robots.txt pentru a controla crawlarea motoarelor de căutare, a gestiona accesul crawler-elor și a optimiza SEO-ul site-ului dvs.
- Generator Sitemap Generator gratuit de sitemap XML online. Adăugați URL-uri, setați priorități și frecvențe, creați sitemap-uri SEO instant.