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
    Tailwind Playground