Sandbox Tailwind CSS Terapkan kelas utilitas Tailwind CSS ke elemen dengan pratinjau langsung dan output HTML.

🎨

Sandbox Tailwind CSS

Terapkan kelas utilitas Tailwind CSS ke elemen dengan pratinjau langsung dan output HTML.

Masukkan kelas Tailwind

Ketik atau tempelkan kelas utilitas Tailwind CSS di bidang input.

Pilih elemen dan konten

Pilih jenis elemen HTML dan atur teks konten inner.

Pratinjau dan salin

Lihat elemen yang diberi gaya secara langsung dan salin HTML dengan kelas.

Loading tool...

What Is Sandbox Tailwind CSS?

Tailwind CSS Playground adalah previewer langsung untuk kelas utilitas Tailwind. Ketik atau tempelkan kelas Tailwind dan lihat secara instan bagaimana mereka menggayakan elemen HTML yang dipilih. Alat ini sangat cocok untuk mempelajari Tailwind, bereksperimen dengan kombinasi kelas, dan membuat prototipe gaya komponen dengan cepat. Anda dapat memilih jenis elemen HTML (div, tombol, p, span, a) dan mengatur konten teks inner. Perpustakaan contoh preset menyediakan titik awal untuk komponen umum: tombol primer, kartu, lencana, peringatan, input, dan latar belakang gradien. Keluaran yang dihasilkan adalah HTML bersih dengan kelas, siap untuk disalin ke dalam proyek Tailwind Anda. Karena alat ini berjalan dalam aplikasi Next.js yang dikonfigurasi Tailwind, pratinjauannya akurat hingga rendering Tailwind nyata.

Why Use Sandbox Tailwind CSS?

Pratinjau langsung dari kombinasi kelas utilitas Tailwind apa pun
Contoh preset untuk pola komponen umum
Beberapa jenis elemen HTML untuk prototip yang realistis
Keluaran HTML bersih siap ditempelkan ke proyek Tailwind

Common Use Cases

Belajar Tailwind

Eksperimen dengan kelas Tailwind untuk memahami efek visualnya.

Prototip Komponen

Cepat membuat prototipe gaya komponen sebelum diimplementasikan dalam kode.

Eksperimen Kelas

Coba kombinasi kelas yang berbeda untuk menemukan tampilan yang sempurna.

Komunikasi Tim

Bagikan kombinasi kelas Tailwind spesifik dengan anggota tim.

Technical Guide

Tailwind CSS adalah kerangka utilitas-pertama di mana gaya diterapkan melalui kelas tujuan tunggal secara langsung di HTML. Kelas mengikuti konvensi penamaan yang konsisten: properti-nilai (misalnya, bg-biru-500, teks-putih, p-4). Variasi responsif menggunakan awalan titik akhir (sm:, md:, lg:, xl:). Variasi status menggunakan awalan pseudo-kelas (hover:, fokus:, aktif:). Mode gelap menggunakan awalan dark:. Spasi menggunakan skala di mana 1 unit = 0,25rem (4px). Warna menggunakan sistem nuansa dari 50 (terang) hingga 950 (tergelap). Kelas tipografi mengontrol keluarga font, ukuran, berat, tinggi baris, dan pelacakan. Utilitas Flexbox dan Grid menangani tata letak. Direktif @apply dapat mengekstrak pola utilitas yang diulangi ke dalam kelas kustom. Mode JIT Tailwind menghasilkan hanya CSS untuk kelas yang sebenarnya digunakan dalam proyek Anda.

Tips & Best Practices

1
Mulai dengan preset dan modifikasi kelas untuk mempelajari pola penamaan
2
Gunakan awalan responsif seperti md: dan lg: untuk menguji perilaku responsif
3
Gabungkan hover: dengan transisi untuk efek interaktif yang halus
4
Gunakan dokumen resmi Tailwind bersama dengan alat ini sebagai referensi

Related Tools

Pembuat Tombol CSS

Desain tombol CSS kustom dengan warna, padding, border, bayangan, dan efek hover.

🎨 CSS & Design

Pembuat Kartu CSS

Buat desain kartu glassmorphic dengan pengaturan blur latar belakang, transparansi, dan bayangan.

🎨 CSS & Design

Pengujian Desain Responsif

Pratinjau situs web pada titik breakpoint perangkat yang umum dengan viewer iframe bawaan.

🎨 CSS & Design

Generator Konfigurasi Tailwind

Buat file konfigurasi Tailwind CSS dengan warna, font, dan breakpoint kustom.

🎨 CSS & Design

Frequently Asked Questions

Q Apakah semua kelas Tailwind tersedia?

Ya, karena alat ini berjalan dalam proyek yang dikonfigurasi Tailwind, kelas utilitas standar tersedia.

Q Dapatkah saya menguji kelas responsif?

Awalan responsif diakui tetapi pratinjau menampilkan wadah tetap. Ubah ukuran browser Anda untuk menguji titik pemutusan.

Q Apakah mendukung kelas mode gelap?

Kelas awalan dark: akan berfungsi berdasarkan pengaturan mode gelap sistem atau aplikasi Anda.

Q Dapatkah saya menggunakan kelas Tailwind kustom?

Hanya kelas utilitas Tailwind standar yang tersedia. Kelas kustom dari konfigurasi proyek Anda tidak akan berfungsi di sini.

Q Bagaimana cara mempelajari kelas mana yang harus digunakan?

Mulai dengan contoh preset dan referensi dokumen Tailwind CSS resmi untuk referensi kelas lengkap.

About This Tool

Sandbox Tailwind CSS is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.