Vuetify vs Tailwind vs Bootstrap ต่างกันอย่างไร เลือกอะไรดีสำหรับ Vue project

ในโลกของ Developer ยุคปัจจุบันมีเครื่องมือและเทคนิคมากมายให้เลือกใช้ รวมถึงการทำเว็บหรือแอพขึ้นมา 1 เว็บก็จะต้องประกอบไปด้วยเครื่องมือหลายตัวที่ต้องมาใช้รวมกัน วันนี้จะมาแนะนำ 3 CSS Framework ยอดนิยมของ

Vuetify

Vuetify เป็น Vue UI Library ที่มีส่วนประกอบของการออกแบบอย่างสวยงาม ไม่จำเป็นต้องมีทักษะการออกแบบ ทุกสิ่งที่คุณต้องการในการสร้างแอปพลิเคชันที่น่าทึ่งอยู่ที่ปลายนิ้วของคุณ

Vuetify เป็นเฟรมเวิร์กคอมโพเนนต์สำหรับ Vue.js 2 โดยมีจุดมุ่งหมายเพื่อให้ส่วนประกอบที่เรียบง่าย มีความหมาย และนำกลับมาใช้ใหม่ได้ซึ่งทำให้การสร้างแอปพลิเคชันของคุณเป็นเรื่องง่าย

Vuetify ใช้รูปแบบการออกแบบ Material Design ของ Google โดยใช้ต้นแบบจากเฟรมเวิร์กยอดนิยมอื่น ๆ เช่น Materialize.css, Material Design Lite, Semantic UI และ Bootstrap 4

จุดเด่นของ Vuetify

• Vue UI Library
• มี UI Material Components เตรียมพร้อมให้ใช้งาน ไม่ต้องใช้ความรู้ในด้าน Design มาก
• เริ่มต้นใช้งานได้ง่ายคล้ายกับ Bootstrap
• ใช้ได้กับ Vue project เท่านั้น

Tailwind

Tailwind คือ utility-first CSS framework ที่เต็มไปด้วยคลาสเช่น flex, pt-4, text-center และ rotate-90 ที่สามารถประกอบเพื่อสร้างการออกแบบใด ๆ ได้โดยตรง

Tailwind แตกต่างจากเฟรมเวิร์กเช่น Bootstrap, Foundation หรือ Bulma ตรงที่ไม่ใช่ชุด UI ไม่มีธีมเริ่มต้นและไม่มีองค์ประกอบ UI ในตัว

จุดเด่นของ Tailwind

• utility-first CSS framework เตรียม CSS Class ไว้ให้พร้อมใช้โดยไม่ต้องเขียน CSS เอง
• ปรับแต่ง Design ได้มาก
• สามารถนำ CSS ส่วนที่ไม่ได้ใช้ออกตอน Build ได้
• มีเพียง CSS อย่างเดียว ไม่มี JavaScript จะต้องมาทำพวก Modal หรืองานที่ต้องการ Interactive ของ JavaScript เอง
• นำไปใช้กับ Vue, React, Angular ได้เลยเพราะเป็นเพียง CSS Class

Bootstrap

Bootstrap ออกแบบและปรับแต่งเว็บไซต์บนอุปกรณ์เคลื่อนที่ที่ตอบสนองได้อย่างรวดเร็วด้วย Bootstrap ซึ่งเป็นชุดเครื่องมือ Frontend Framework ที่ได้รับความนิยมมากที่สุด ซึ่งมีตัวแปรและส่วนผสมของ Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.

Bootstrap ในยุคหนึ่งเวบส่วนใหญ่หน้าตาเหมือนๆกันเพราะต่างก็ใช้ Bootstrap

จุดเด่นของ Bootstrap

• เริ่มต้นใช้งานได้ง่าย เป็น CSS Framework ยอดนิยม
• มี UI CSS Class สำเร็จรูปให้เลือกใช้
• มี Template Design ให้เลือกมากมาย
• นำไปใช้กับ Vue, React, Angular ได้ แต่อาจจะไม่ค่อยสะดวกนัก ถ้าจะนำมาใช้ใน Vue แนะนำให้ใช้ BootstrapVue น่าจะเหมาะกว่า

สรุปเลือกอะไรดี

โดยส่วนตัวแล้วผมใช้ 2 ตัวเป็นหลัก คือ Vuetify กับ Tailwind สำหรับ Vue project

Vuetify ใช้กับ Project ส่วนใหญ่ เนื่องจากมี UI Components สำเร็จรูปให้ใช้ ไม่ต้องมานั่ง Design เองทั้งหมด และยังมีพวก Modal หรือ Interactive ของ Javascript ให้ใช้ นอกจากนั้นถ้าทำงานด้วยกันหลายคน Design ก็จะไม่โดดแตกต่างกันมาก

ถ้าใช้ Tailwind อาจจะต้องเสียเวลามาทำ Components เพื่อให้ใช้งานได้สะดวกขึ้น

Tailwind ใช้สำหรับทำ Homepage หรือ Landing Page แยกส่วนต่างหากจากเว็บหลัก(ที่ใช้ Vuetify) เพราะสามารถช่วยลดขนาด CSS ได้ และไม่มี JavaScript ติดมาด้วย ทำให้เว็บเร็วขึ้น ส่งผลดีต่อ Google Page Speed ที่ดีขึ้น

อีกกรณีที่ใช้ Tailwind คืองานของลูกค้าที่มี Design มาแล้ว และไม่สามารถใช้กับ Vuetify ได้ การใช้ Tailwind อาจจะสะดวกมากกว่า