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
Button
Card
Badge
Alert
Input
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