Parco Giochi Tailwind
Scrivi HTML con le utility di Tailwind CSS v4 e compila in tempo reale nel browser.
Cos'è il Parco Giochi Tailwind?
È un editor gratuito nel browser dove scrivi HTML con le classi utility di Tailwind CSS v4 e vedi il risultato compilato in un'anteprima live. Il compilatore ufficiale Tailwind v4 per browser è incluso nella pagina, nessuna installazione necessaria.
Il mio codice viene caricato da qualche parte?
No. La compilazione avviene interamente nel tuo browser con una copia locale del motore Tailwind. Il tuo HTML non lascia mai la pagina e le bozze sono salvate solo nel localStorage del browser.
Quale versione di Tailwind usa?
Usa Tailwind CSS v4, l'ultima versione principale, tramite il compilatore ufficiale @tailwindcss/browser. Tutte le utility principali, le varianti e il tema predefinito funzionano, inclusi i valori arbitrari tra parentesi quadre.
Come funziona l'anteprima live?
Il tuo HTML viene iniettato in un iframe isolato insieme al compilatore. Dopo ogni modifica le utility sono ricompilate dopo una pausa di 500 millisecondi: la digitazione resta fluida e l'anteprima sempre aggiornata.
Come provo gli stili della modalità scura?
Attiva l'interruttore «Anteprima scura». Aggiunge la classe "dark" al documento di anteprima e il compilatore mappa la variante dark: su quella classe, così utility come dark:bg-slate-900 reagiscono subito.
Posso vedere il CSS generato da Tailwind?
Sì. Il pannello «CSS compilato» sotto gli editor mostra esattamente il foglio di stile prodotto dal compilatore per il tuo markup, e il pulsante «Copia CSS» lo copia negli appunti.
Cosa contiene l'HTML scaricato?
Il pulsante Scarica HTML produce un file autonomo con il tuo markup più il CSS compilato incorporato nell'head: la pagina si visualizza correttamente offline, senza link CDN né connessione.
Ci sono modelli di partenza?
Sì. Il selettore dei modelli offre una sezione hero, una griglia di card responsive e una tabella prezzi a tre livelli, tutti scritti con le utility v4 attuali, più un punto di partenza vuoto minimale.
Come usare Parco Giochi Tailwind
Questo parco giochi esegue interamente sulla tua macchina il compilatore browser ufficiale di Tailwind CSS v4. Digiti a sinistra HTML semplice con classi utility, il compilatore genera il CSS corrispondente dentro un iframe di anteprima isolato, e un pannello sotto mostra il foglio di stile esatto prodotto. Non viene caricato nulla: il compilatore, il tuo markup e le tue bozze restano nel browser.
- Scegli un punto di partenza dal selettore Modello: Hero, griglia di card, tabella prezzi o Vuoto; il tuo testo viene anche ripristinato automaticamente tra le visite.
- Modifica l'HTML nell'editor a sinistra. Premere Tab inserisce due spazi, e l'anteprima si ricompila circa 500 ms dopo che smetti di digitare.
- Attiva A capo morbido per controllare l'andata a capo, e il selettore della dimensione del carattere per impostare la dimensione del testo dell'editor.
- Attiva Anteprima scura per aggiungere la classe "dark" al documento di anteprima; utility come dark:bg-slate-900 rispondono all'istante.
- Leggi le regole generate nel pannello CSS compilato e copiale con Copia CSS quando ti servono.
- Usa Copia HTML per il markup grezzo, o Scarica HTML per ottenere un file autonomo con il CSS compilato inlinato, pronto da aprire offline.
Il download ha stili reali solo dopo almeno una compilazione, quindi lascia che l'anteprima esegua il rendering una volta prima di esportare. Per ridurre il CSS generato, elimina dal modello gli elementi non usati — il pannello riflette sempre esattamente ciò di cui il tuo markup attuale ha bisogno.
Strumenti correlati
- Code Playground Playground online per HTML, CSS e JavaScript con anteprima in tempo reale, editor con numeri di riga e console catturata. Prova i frammenti all'istante e scarica il risultato come singolo file HTML - tutto nel browser.
- Generatore CSS Grid Generatore CSS Grid visuale gratuito con anteprima dal vivo. Progetta layout a griglia responsive interattivamente ed esporta codice CSS pronto per la produzione.
- Calcolatrice Chmod Calcolatrice chmod online gratuita per visualizzare e calcolare i permessi dei file Linux con caselle di controllo. Converti istantaneamente tra notazione numerica (755, 644) e simbolica (rwxr-xr-x). Supporta permessi speciali come setuid, setgid, sticky bit.
- Tabella ASCII Riferimento completo per la codifica dei caratteri ASCII con codici decimali, esadecimali, ottali, binari, entità HTML e descrizioni. Ricerca e filtro istantanei.
- Tester di Richieste HTTP Testa le API REST direttamente nel browser. Invia richieste GET, POST, PUT, DELETE con header, body e parametri personalizzati. Visualizza stato, header e corpo JSON della risposta istantaneamente.
- Generatore .htaccess Genera regole .htaccess Apache per reindirizzamenti, riscritture, header di sicurezza, caching e altro.
- Generatore Robots.txt Generatore gratuito di robots.txt online. Crea e personalizza file robots.txt per controllare la scansione dei motori di ricerca, gestire l'accesso dei crawler e ottimizzare il SEO del tuo sito.
- Generatore di Sitemap Generatore gratuito di sitemap XML online. Aggiungi URL, imposta priorità e frequenze, crea sitemap SEO istantaneamente.