Playground Tailwind
Tulis HTML dengan utilitas Tailwind CSS v4 dan kompilasi langsung di browser.
Apa itu Playground Tailwind?
Editor gratis di dalam peramban tempat Anda menulis HTML dengan kelas utilitas Tailwind CSS v4 dan melihat hasil kompilasinya di pratinjau langsung. Kompiler resmi Tailwind v4 untuk peramban sudah dibundel dalam halaman, jadi tidak perlu instalasi apa pun.
Apakah kode saya diunggah ke mana pun?
Tidak. Kompilasi terjadi sepenuhnya di peramban Anda memakai salinan lokal mesin Tailwind. HTML Anda tidak pernah keluar dari halaman dan draf hanya tersimpan di localStorage peramban.
Versi Tailwind berapa yang dipakai?
Tailwind CSS v4, versi mayor terbaru, lewat kompiler resmi @tailwindcss/browser. Semua utilitas inti, varian, dan tema bawaan berfungsi, termasuk nilai arbitrer dalam tanda kurung siku.
Bagaimana pratinjau langsung bekerja?
HTML Anda disuntikkan ke iframe terisolasi bersama kompiler. Setiap suntingan mengompilasi ulang utilitas setelah jeda 500 milidetik, sehingga mengetik tetap lancar dan pratinjau selalu terbaru.
Bagaimana menguji gaya mode gelap?
Aktifkan sakelar «Pratinjau gelap». Ia menambahkan kelas dark ke dokumen pratinjau dan kompiler memetakan varian dark: ke kelas itu, sehingga utilitas seperti dark:bg-slate-900 langsung merespons.
Bisakah melihat CSS yang dihasilkan Tailwind?
Bisa. Panel «CSS hasil kompilasi» di bawah editor menampilkan stylesheet persis yang dibuat kompiler untuk markup Anda, dan tombol «Salin CSS» menyalinnya ke papan klip.
Apa isi HTML yang diunduh?
Tombol Unduh HTML menghasilkan berkas mandiri berisi markup Anda plus CSS hasil kompilasi yang disematkan di head, sehingga halaman tampil benar secara offline tanpa tautan CDN dan tanpa internet.
Apakah ada templat awal?
Ada. Pemilih templat menyediakan bagian hero, kisi kartu responsif, dan tabel harga tiga tingkat, semuanya dengan utilitas v4 terkini, ditambah titik awal kosong minimalis.
Cara Menggunakan Playground Tailwind
Playground ini menjalankan kompiler peramban resmi Tailwind CSS v4 sepenuhnya di mesin Anda. Anda mengetik HTML polos dengan kelas utilitas di kiri, kompiler menghasilkan CSS yang cocok di dalam iframe pratinjau ber-secara-sandbox, dan panel di bawah menampilkan stylesheet persis yang dihasilkan. Tidak ada yang diunggah: kompiler, markup Anda, dan draf Anda semuanya tetap di peramban.
- Pilih titik awal dari pemilih Templat: Hero, Grid kartu, Tabel harga, atau Kosong; teks Anda juga dipulihkan secara otomatis antar kunjungan.
- Sunting HTML di editor kiri. Menekan Tab menyisipkan dua spasi, dan pratinjau dikompilasi ulang sekitar 500 ms setelah Anda berhenti mengetik.
- Aktifkan Bungkus lembut untuk mengontrol pemenggalan baris, dan pemilih ukuran huruf untuk menetapkan ukuran teks editor.
- Nyalakan Pratinjau gelap untuk menambahkan kelas "dark" ke dokumen pratinjau; utilitas seperti dark:bg-slate-900 merespons seketika.
- Baca aturan yang dihasilkan di panel CSS terkompilasi dan salin dengan Salin CSS saat Anda membutuhkannya.
- Gunakan Salin HTML untuk markup mentah, atau Unduh HTML untuk mendapat berkas mandiri dengan CSS terkompilasi yang disisipkan, siap dibuka luring.
Unduhan baru memiliki gaya sungguhan setelah setidaknya satu kali kompilasi, jadi biarkan pratinjau dirender sekali sebelum mengekspor. Untuk mengurangi CSS yang dihasilkan, hapus elemen yang tak terpakai dari templat — panel selalu mencerminkan persis apa yang dibutuhkan markup Anda saat ini.
Alat Terkait
- Halaman Uji Kode Halaman uji HTML, CSS, dan JavaScript online dengan pratinjau langsung, editor bernomor baris, dan konsol yang ditangkap. Uji cuplikan seketika dan unduh hasilnya sebagai satu berkas HTML - sepenuhnya di peramban Anda.
- Generator CSS Grid Generator CSS Grid visual gratis dengan pratinjau langsung. Desain tata letak grid responsif secara interaktif dan ekspor kode CSS siap produksi.
- Kalkulator Chmod Kalkulator chmod online gratis untuk memvisualisasikan dan menghitung izin file Linux dengan kotak centang. Konversi instan antara notasi numerik (755, 644) dan simbolik (rwxr-xr-x). Mendukung izin khusus seperti setuid, setgid, sticky bit.
- Tabel ASCII Referensi pengkodean karakter ASCII lengkap dengan kode desimal, heksadesimal, oktal, biner, entitas HTML, dan deskripsi karakter. Cari dan filter secara instan.
- Penguji Permintaan HTTP Uji API REST langsung di browser Anda. Kirim permintaan GET, POST, PUT, DELETE dengan header, body, dan parameter kustom. Lihat status, header, dan body JSON respons secara instan.
- Generator .htaccess Buat aturan .htaccess Apache untuk redirect, rewrite, header keamanan, caching, dan lainnya.
- Generator Robots.txt Generator robots.txt online gratis. Buat dan sesuaikan file robots.txt untuk mengontrol perayapan mesin pencari, mengelola akses crawler, dan mengoptimalkan SEO situs Anda.
- Generator Sitemap Generator sitemap XML online gratis. Tambah URL, atur prioritas dan frekuensi, buat sitemap SEO secara instan.