ปฏิเสธไม่ได้ว่า CSS Framework ที่สวยโดนใจ ใช้งานง่าย มี Learning Curve ระยะเวลาในการเรียนรู้ไม่นาน มีการพัฒนาอย่างต่อเนื่อง ตามยุคสมัย และได้รับความนิยมมากที่สุดในช่วงหลายปีที่ผ่านมา คือ Bootstrap Framework
แต่จริง ๆ แล้วในโลกของ CSS ยังมีเฟรมเวิร์คอยู่อีกมากมายที่ถูกคิดค้น พัฒนาขึ้นมา เพื่อให้ตอบโจทย์นักพัฒนามากที่สุด และอีกหนึ่ง Framework ที่กำลังได้รับความนิยมมากขึ้นเรื่อย ๆ นั้นคือ Tailwind Framework
ภาพตัวอย่าง Tailwind UI
Tailwind แตกต่างจาก Framework อื่นอย่างไร ?
ถ้าเราเข้าไปที่เว็บไซต์ทางการของ Tailwind สิ่งที่ผู้พัฒนาพยายามจะบอกเราคือ Tailwind เป็น Framework แบบ A utility-first ความหมายคือเป็นเฟรมเวิร์คที่มี class สำเร็จรูปอรรถประโยชน์ให้เราใช้งานได้ทันที เมื่อไหร่ที่เราต้องการเปลี่ยน UI หลักของเฟรมเวิร์ค สี ขนาด การจัดวาง ต่าง ๆ นา ๆ เราแทบไม่ต้องแตะไฟล์ CSS หลักเลย ซึ่งแตกต่างจาก Bootstrap Framework ที่จะเป็นแบบ Extracting Component Classes คือการแยกคลาสที่ไม่จำเป็นออกจาก component หลักของเฟรมเวิร์ค เพื่อให้เห็นภาพชัดเจน ตัวอย่างการสร้างปุ่มระหว่าง 2 เฟรมเวิร์คด้านล่าง
สร้างปุ่มแบบ Tailwind
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
Button
</button>สร้างปุ่มแบบ Bootstrap
<button class="btn btn-blue">
Button
</button>
<style>
.btn {
font-weight:700;
padding:2px 4px 2px 4px;
}
.btn-blue {
color:white;
background-color:rgba(0, 0, 255, 0.5);
}
.btn-blue:hover {
background-color:blue;
}
</style>จากการสร้างปุ่มระหว่าง 2 เฟรมเวิร์คนั้น มีข้อแตกต่างกัน ฝั่ง Tailwind จะเน้นให้ class ที่สำเร็จมาให้เราใช้งาน ส่วนฝั่ง bootstrap คือถ้าต้องการเปลี่ยนแปลงอะไร ก็แค่สร้าง class ใหม่ขึ้นมากำกับ
แนวคิดการใช้ CSS แบบ Tailwind A utility-first ดีอย่างไร ?
อ่านมาถึงตรงนี้ทุกคนคงจะคิดว่า แบบเดิม หรือการเขียนแบบ Bootstrap Extracting Component Classes ( แยกคลาสที่ไม่จำเป็นออกจากคลาสหลักของเฟรมเวิร์ค ) น่าจะเวิร์คกว่าใช่ไหมครับ เขียนง่าย ๆ และคลาสไม่ต้องเยอะมาก ถ้าต้องการปรับส่วนไหนก็เขียน Custom CSS ขึ้นมาเสริมเองได้
ข้อดีของการเขียนแบบ A utility-first ก็คือตรงกันข้ามกับการเขียนแบบ Extracting Component Classes ครับ ให้นึกภาพว่า ในกรณีที่เราใช้ button component ของเฟรมเวิร์ค แต่เผอิญว่า ในแต่ละหน้าของเว็บไซต์เรามีขนาดของปุ่มที่แตกต่างกัน 2 – 3 พิกเซล หรืออาจจะมากกว่านั้น
สำหรับ Bootstrap เราอาจจะต้องเขียนคลาสใน Custom CSS เพื่อกำหนดขนาดให้ปุ่มที่แตกต่างกันในแต่ละหน้า
แต่สำหรับ Tailwind A utility-first เราสามารถใช้งานคลาสได้ทันที โดยไม่ต้องเขียนคลาสขึ้นมาใหม่
ตัวอย่างเช่น ถ้าเราต้องการปุ่มที่มีความกว้าง 15px padding 2px margin 2px พื้นหลังสีแดงระดับความเข็มของสี 700 และมีค่าความโปรงของพื้นหลัง 50% จะเขียนคำสั่งได้ดังนี้
<button class="h-15 p-2 m-2 bg-red-700 bg-opacity-50">Danger</button>มาถึงตรงนี้คงจะพอมองภาพออกแล้วใช่ไหมครับว่า ข้อดีของ Tailwind และการใช้งาน CSS แบบ A utility-first ก็น่าสนใจไม่น้อยเหมือนกัน
