Tailwind Playground
Uji dan pratonton kelas Tailwind CSS dalam masa nyata.
Tetapan
Konfigurasi jenis elemen dan kandungan
Contoh Pratetap
Gunakan kombinasi gaya yang biasa digunakan dengan cepat
Button
Card
Badge
Alert
Input
Pratonton
Lihat hasil gaya masa nyata
Hello, Tailwind!
HTML Dijana
Kod HTML yang dijana dengan tetapan semasa
<div className="bg-blue-500 text-white p-4 rounded-lg shadow-md hover:bg-blue-600 transition-colors">Hello, Tailwind!</div>
๐ก Petua Penggunaan
Kelas Biasa:
- โข
hover:- Gaya keadaan hover - โข
focus:- Gaya keadaan fokus - โข
active:- Gaya keadaan aktif - โข
transition-colors- Kesan peralihan warna
Kelas Responsif:
- โข
sm:- 640px ke atas - โข
md:- 768px ke atas - โข
lg:- 1024px ke atas - โข
xl:- 1280px ke atas