จุดประสงค์การเนื้อหา CSS นี้ มีเพื่อบอกว่ามันมีอะไรบ้าง ให้ดู ให้เห็น คร่าวๆ เวลาใช้ทำงานจริงๆ แนะนำให้ใช้ TailwindCSS หรือ UnoCSS

เหตุผลที่เมื่อใช้ Styles แนะนำ TailwindCSS, UnoCSS มากกว่า คือ

• มันมี utilities class ที่คิดมาให้แล้ว เราไม่ต้องเขียนเองทั้งหมด
• เขียนน้อย เขียนสั้น ยืดหยุ่นกว่า
• ทำ design system ได้ดีกว่า
• AI ชอบ AI รู้จัก เขียนน้อย เขียนสั้น ลดการใช้ tokens ลงไปได้อีก

CSS ใช่ใส่ Styles ให้กับ UI

CSS (Cascading Style Sheets) เป็นภาษาที่ใช้จัดรูปแบบและแสดงผลเว็บเพจ โดยกำหนดลักษณะการแสดงผลของ HTML elements เช่น สี ขนาด และตำแหน่ง CSS ช่วยแยกเนื้อหา (HTML) จากการออกแบบ ทำให้พัฒนาและบำรุงรักษาเว็บไซต์ได้ง่ายขึ้น

CSS Alternative

TIP

• จริงๆมันมีหลายตัว แต่คิดว่ารูปแบบการเขียนแบบ TailwindCSS, UnoCSS มันดีกว่าทุกรูปแบบ
• CSS ใช้ร่วมกับอะไรก็ได้ แต่ TailwindCSS กับ UnoCSS ให้เลือกอย่างใดอย่างหนึ่ง
• ใช้ TailwindCSS ก็ได้ แต่ใช้ UnoCSS จะดีกว่ามันยืดหยุ่นกว่า ทำ Design System ได้ง่ายกว่า

Alternative	CSS	Tailwind CSS	UnoCSS
ข้อดี	เป็นมาตรฐาน, รองรับอย่างกว้างขวาง	พัฒนาได้รวดเร็ว, การออกแบบที่สอดคล้อง	ปรับแต่งได้สูง, เวลาสร้างเร็ว
ข้อเสีย	ต้องเขียนเองใหม่ทั้งหมด	ยิ่งเขียนเยอะ ยิ่งดูยาก	ยากสำหรับผู้เริ่มต้น
คำอธิบาย	Cascading Style Sheets	เฟรมเวิร์ก CSS แบบ Utility-first	เครื่องมือสร้าง CSS แบบ Atomic
การใช้งาน	เขียน CSS ตรงๆ หรือใช้ preprocessor	ใช้ class ที่กำหนดไว้ล่วงหน้า	สร้าง utility classes แบบอัตโนมัติ
ขนาดไฟล์	ขึ้นอยู่กับการเขียน	ใหญ่ในตอนแรก แต่สามารถ purge ได้	เล็กมาก เนื่องจากสร้างเฉพาะที่ใช้
การปรับแต่ง	ทำได้อย่างอิสระ	ปรับแต่งผ่าน configuration	ปรับแต่งได้ง่ายผ่าน rules
เหมาะสำหรับ	ทุกขนาดโปรเจค	โปรเจคขนาดกลางถึงใหญ่	ทุกขนาดโปรเจค โดยเฉพาะที่ต้องการความยืดหยุ่นสูง