Taman Permainan Tailwind
Tulis HTML dengan utiliti Tailwind CSS v4 dan kompilasi langsung dalam pelayar.
Apakah Taman Permainan Tailwind?
Editor percuma dalam pelayar di mana anda menulis HTML dengan kelas utiliti Tailwind CSS v4 dan melihat hasil terkumpul dalam pratonton langsung. Pengkompil rasmi Tailwind v4 untuk pelayar dibundel dalam halaman, jadi tiada pemasangan diperlukan.
Adakah kod saya dimuat naik ke mana mana?
Tidak. Pengumpulan berlaku sepenuhnya dalam pelayar anda menggunakan salinan setempat enjin Tailwind. HTML anda tidak pernah keluar dari halaman dan draf hanya disimpan dalam localStorage pelayar.
Versi Tailwind yang mana digunakan?
Tailwind CSS v4, versi utama terkini, melalui pengkompil rasmi @tailwindcss/browser. Semua utiliti teras, varian dan tema lalai berfungsi, termasuk nilai sewenang-wenangnya dalam kurungan segi empat.
Bagaimana pratonton langsung berfungsi?
HTML anda disuntik ke dalam iframe berasingan bersama pengkompil. Selepas setiap suntingan, utiliti dikumpul semula selepas jeda 500 milisaat, jadi menaip kekal lancar dan pratonton sentiasa terkini.
Bagaimana menguji gaya mod gelap?
Hidupkan suis «Pratonton gelap». Ia menambah kelas dark pada dokumen pratonton dan pengkompil memetakan varian dark: kepada kelas itu, jadi utiliti seperti dark:bg-slate-900 bertindak segera.
Bolehkah melihat CSS yang dijana Tailwind?
Boleh. Panel «CSS terkumpul» di bawah editor memaparkan lembar gaya tepat yang dihasilkan pengkompil untuk penanda anda, dan butang «Salin CSS» menyalinnya ke papan keratan.
Apakah kandungan HTML yang dimuat turun?
Butang Muat Turun HTML menghasilkan fail berdikari yang mengandungi penanda anda serta CSS terkumpul yang dinunaskan di head, jadi halaman dipaparkan betul tanpa talian tanpa pautan CDN dan tanpa internet.
Adakah terdapat templat permulaan?
Ada. Pemilih templat menawarkan bahagian wira, grid kad responsif dan jadual harga tiga peringkat, semuanya ditulis dengan utiliti v4 terkini, ditambah titik mula kosong minimum.
Cara Menggunakan Taman Permainan Tailwind
Taman permainan ini menjalankan pengkompil pelayar rasmi Tailwind CSS v4 sepenuhnya dalam mesin anda. Anda menaip HTML biasa dengan kelas utiliti di sebelah kiri, pengkompil menjana CSS yang sepadan dalam iframe pratonton berpasir, dan panel di bawah menunjukkan helaian gaya tepat yang dihasilkan. Tiada apa-apa dimuat naik: pengkompil, penanda anda dan draf anda semuanya kekal dalam pelayar.
- Pilih titik mula dalam pemilih Templat: Hero, grid kad, jadual harga atau Kosong; teks anda turut dipulihkan secara automatik antara lawatan.
- Sunting HTML dalam editor di sebelah kiri. Menekan Tab menyisipkan dua ruang, dan pratonton dikompil semula kira-kira 500 ms selepas anda berhenti menaip.
- Aktifkan Balut lembut untuk mengawal pemecahan baris, dan pemilih saiz fon untuk menetapkan saiz teks editor.
- Hidupkan Pratonton gelap untuk menambah kelas "dark" pada dokumen pratonton; utiliti seperti dark:bg-slate-900 bertindak balas serta-merta.
- Baca peraturan yang dijana dalam panel CSS terkompil dan salin dengan Salin CSS apabila diperlukan.
- Guna Salin HTML untuk penanda mentah, atau Muat turun HTML untuk mendapat fail kendiri dengan CSS terkompil terbenam, sedia dibuka luar talian.
Muat turun hanya mempunyai gaya sebenar selepas sekurang-kurangnya satu kompilasi, jadi biarkan pratonton dirender sekali sebelum mengeksport. Untuk mengurangkan CSS yang dijana, padamkan elemen tak terpakai daripada templat — panel sentiasa mencerminkan tepat apa yang diperlukan penanda semasa anda.
Alat Berkaitan
- Taman Kod Taman kod HTML, CSS dan JavaScript dalam talian dengan pratonton langsung, penyunting bernombor baris dan konsol yang ditangkap. Uji petikan serta-merta dan muat turun hasil sebagai satu fail HTML - sepenuhnya dalam pelayar anda.
- Penjana CSS Grid Penjana CSS Grid visual percuma dengan pratonton langsung. Reka susun atur grid responsif secara interaktif dan eksport kod CSS sedia produksi.
- Kalkulator Chmod Kalkulator chmod dalam talian percuma untuk mengvisualisasikan dan mengira keizinan fail Linux dengan kotak tanda. Tukar serta-merta antara notasi angka (755, 644) dan simbolik (rwxr-xr-x). Menyokong keizinan khas seperti setuid, setgid, sticky bit.
- Jadual ASCII Rujukan pengkodan aksara ASCII lengkap dengan kod perpuluhan, heksadesimal, oktal, binari, entiti HTML dan penerangan aksara. Cari dan tapis serta-merta.
- Penguji Permintaan HTTP Uji API REST terus dalam pelayar anda. Hantar permintaan GET, POST, PUT, DELETE dengan pengepala, badan dan parameter tersuai. Lihat status, pengepala dan badan JSON respons serta-merta.
- Penjana .htaccess Jana peraturan .htaccess Apache untuk pengalihan, penulisan semula, header keselamatan, cache dan banyak lagi.
- Penjana Robots.txt Penjana robots.txt dalam talian percuma. Cipta dan sesuaikan fail robots.txt untuk mengawal perayapan enjin carian, menguruskan akses perayap, dan mengoptimumkan SEO laman web anda.
- Penjana Sitemap Penjana sitemap XML dalam talian percuma. Tambah URL, tetapkan keutamaan dan kekerapan, buat sitemap SEO serta-merta.