Tailwind CSS

เวลาอ่านโดยประมาณ: ~15 นาที

Tailwind CSS เป็น utility-first CSS framework ที่ช่วยให้คุณสร้างอินเทอร์เฟซผู้ใช้ที่สวยงามและตอบสนองได้อย่างรวดเร็วโดยไม่ต้องออกจาก HTML ของคุณ

ทำไม Tailwind CSS ใน PERB Stack

"AI เข้าใจ Tailwind ดีกว่า CSS styling แบบอื่นๆ ทำให้การขอความช่วยเหลือจาก AI ในการสร้าง UI components ง่ายขึ้นมาก"

การตัดสินใจ

Tailwind CSS เป็นพื้นฐานของแนวทางการ styling ของเรา ร่วมกับ shadcn/ui สำหรับ components นี่คือเหตุผล:

Tailwind ให้อะไรเราบ้าง:

Utility-first approach เร่งการพัฒนา
ไม่ต้องสลับ context ระหว่าง CSS และ HTML files
Design system ที่ consistent มาให้ตั้งแต่แรก
AI ช่วยได้ดีมากเพราะใช้กันแพร่หลาย
DX ดีมากกับ autocomplete

ทำไมไม่ใช้ CSS แบบดั้งเดิม หรือ CSS-in-JS?

CSS แบบดั้งเดิมต้องจัดการไฟล์มากกว่า
CSS-in-JS มี runtime overhead
AI เข้าใจ Tailwind classes ได้ดีกว่า

ข้อดี-ข้อเสีย

ข้อดี	ข้อเสีย
Rapid prototyping	HTML อาจดูรกได้
ไม่ต้องคิด naming conventions	Learning curve สำหรับ utility classes
AI เข้าใจดี	ต้องเรียนรู้ชื่อ class
Design tokens ที่ consistent	ต้อง config purge
ดีกับ component frameworks	บาง case อาจ verbose
Responsive design built-in	Custom design ต้อง config

ภาพรวม

Tailwind CSS ให้คลาส utility ที่กำหนดไว้ล่วงหน้าซึ่งคุณสามารถใช้เพื่อสร้างการออกแบบที่ซับซ้อนได้โดยตรงในมาร์กอัปของคุณ แทนที่จะสลับไปมาระหว่างไฟล์ CSS และ HTML

ตัวอย่างพื้นฐาน

ตัวอย่างแบบโต้ตอบ

ลองเล่นกับ Tailwind CSS ในสภาพแวดล้อมที่มีชีวิต:

เริ่มต้นใช้งาน

ในโปรเจกต์ PERB Stack ของเรา Tailwind CSS ได้รับการกำหนดค่าไว้ล่วงหน้าแล้ว คุณสามารถเริ่มใช้คลาส utility ได้ทันที