สนามเด็กเล่น Tailwind
ทดสอบและดูตัวอย่างคลาส Tailwind CSS แบบเรียลไทม์
การตั้งค่า
กำหนดค่าประเภทและเนื้อหาขององค์ประกอบ
ตัวอย่างที่ตั้งไว้ล่วงหน้า
ใช้ชุดสไตล์ที่ใช้บ่อยได้อย่างรวดเร็ว
Button
Card
Badge
Alert
Input
ดูตัวอย่าง
ดูผลลัพธ์ที่จัดรูปแบบแบบเรียลไทม์
สวัสดี, Tailwind!
HTML ที่สร้างขึ้น
โค้ด HTML ที่สร้างขึ้นด้วยการตั้งค่าปัจจุบัน
<div className="bg-blue-500 text-white p-4 rounded-lg shadow-md hover:bg-blue-600 transition-colors">สวัสดี, Tailwind!</div>
💡 เคล็ดลับการใช้งาน
คลาสทั่วไป:
- •
hover:- สไตล์สถานะโฮเวอร์ - •
focus:- สไตล์สถานะโฟกัส - •
active:- สไตล์สถานะแอคทีฟ - •
transition-colors- เอฟเฟกต์การเปลี่ยนสี
คลาสที่ตอบสนอง:
- •
sm:- 640px ขึ้นไป - •
md:- 768px ขึ้นไป - •
lg:- 1024px ขึ้นไป - •
xl:- 1280px ขึ้นไป