Tailwind CSS Framework สวยโดนใจ น่าใช้

CSS-Framework-สวยโดนใจ-น่าใช้ ไม่ได้มีแค่-Bootstrap
CSS-Framework-สวยโดนใจ-น่าใช้ ไม่ได้มีแค่-Bootstrap

ปฏิเสธไม่ได้ว่า CSS Framework ที่สวยโดนใจ ใช้งานง่าย มี Learning Curve ระยะเวลาในการเรียนรู้ไม่นาน มีการพัฒนาอย่างต่อเนื่อง ตามยุคสมัย และได้รับความนิยมมากที่สุดในช่วงหลายปีที่ผ่านมา คือ Bootstrap Framework

แต่จริง ๆ แล้วในโลกของ CSS ยังมีเฟรมเวิร์คอยู่อีกมากมายที่ถูกคิดค้น พัฒนาขึ้นมา เพื่อให้ตอบโจทย์นักพัฒนามากที่สุด และอีกหนึ่ง Framework ที่กำลังได้รับความนิยมมากขึ้นเรื่อย ๆ นั้นคือ Tailwind Framework

ภาพตัวอย่าง Tailwind UI

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 ก็น่าสนใจไม่น้อยเหมือนกัน

Leave a Reply