Taman Bermain Tailwind
Uji dan pratinjau kelas Tailwind CSS secara real-time.
Pengaturan
Konfigurasikan jenis dan konten elemen
Contoh Preset
Terapkan kombinasi gaya yang umum digunakan dengan cepat
ButtonCardBadgeAlertInput
Pratinjau
Lihat hasil gaya real-time
Halo, Tailwind!
HTML yang Dihasilkan
Kode HTML yang dihasilkan dengan pengaturan saat ini
<div className="bg-blue-500 text-white p-4 rounded-lg shadow-md hover:bg-blue-600 transition-colors">Halo, Tailwind!</div>
💡 Kiat Penggunaan
Kelas Umum:
- •
hover:- Gaya status hover - •
focus:- Gaya status fokus - •
active:- Gaya status aktif - •
transition-colors- Efek transisi warna
Kelas Responsif:
- •
sm:- 640px ke atas - •
md:- 768px ke atas - •
lg:- 1024px ke atas - •
xl:- 1280px ke atas