ออกแบบและปรับแต่งเว็บไซต์ได้รวดเร็วด้วย Tailwind CSS Framework

Tailwind CSS คืออะไร

ปกติการตกแต่งเว็บไซต์ให้สวยงาม เราจะใช้ภาษา CSS (Cascading Style Sheets) ในการจัดการส่วนนี้ แต่ในการพัฒนาเว็บปัจจุบัน แทบไม่มีใครจะมาเขียน CSS กันขึ้นมาเองแล้วตั้งแต่ต้น เนื่องจากใช้เวลาในการพัฒนาค่อนข้างมาก จึงทำให้เกิด CSS Framework ต่างๆ ขึ้นมามากมาย เช่น Bootstrap, Foundation, Bulma เป็นต้น ซึ่งมีการเขียนคลาสไว้ให้ใช้งานได้โดยสะดวก โดยยึดหลัก “ชื่อคลาสที่สื่อความหมาย” (semantic-based CSS)

สิ่งที่ตามมาก็คือ หากเราอยากได้หน้าตาเว็บบางจุดที่ต่างออกไปจากที่เฟรมเวิร์กเตรียมไว้ให้ ก็จะต้องมีการเขียนคลาสเพิ่มเติมเพื่อใช้เอง ซึ่งในจุดนี้มีหลายๆ คนลงความเห็นไว้ว่า ทำให้เกิดความกระจัดกระจายของโค้ด และดูแลโค้ดยากขึ้น ทำให้คุณ Adam Wathan (ผู้ก่อตั้ง Tailwind CSS) ได้คิดสร้างเฟรมเวิร์กแนวมุ่งเน้นการใช้งานเป็นหลักขึ้นมา

ดังนั้นจึงกล่าวได้ว่า Tailwind CSS คือ เฟรมเวิร์กประเภทมุ่งเน้นการใช้งานเป็นหลัก (utility-first CSS framework) เพื่อช่วยให้พัฒนาเว็บไซต์ขึ้นมาได้อย่างรวดเร็ว และมีความสามารถในการปรับแต่งตามความต้องการได้สูง (highly customizable)

ตัวอย่างการใช้งานคร่าวๆ ของ Tailwind CSS

หากเราเขียน CSS แบบ semantic-based CSS เพื่อให้เกิดขึ้นมาเป็นคอมโพเนนต์ดังรูป ก็จะมีโค้ดหน้าตาประมาณนี้

แต่ถ้าหากใช้ Tailwind CSS ก็จะมีโค้ดหน้าตาประมาณนี้

โดยที่เราไม่ต้องเขียน CSS เพื่อระบุการทำงานเพิ่มเติมแล้ว (เพราะเฟรมเวิร์กทำไว้ให้หมดแล้ว)

นี่เป็นเพียงตัวอย่างสั้นๆ เพื่อแสดงให้เห็นว่าการใช้ Tailwind CSS จะสามารถลดระยะเวลาเขียนโค้ดได้พอสมควรเลย

ข้อดีของ Tailwind CSS

ออกแบบเว็บไซต์ได้ง่ายและรวดเร็วกว่าเขียน CSS เอง
ควบคุมการแสดงผลทุกส่วนในเว็บได้โดยง่าย
ปรับแต่งได้ยืดหยุ่นมากๆ
มีตัวช่วยบีบอัด CSS ให้เหลือเท่าที่ใช้งานจริง ทำให้หน้าเว็บสามารถแสดงผลได้เร็วขึ้น

ข้อสังเกตของ Tailwind CSS

ต้องใช้เวลาในการเรียนรู้คลาสต่างๆ ที่ Tailwind CSS จัดเตรียมไว้ให้
เดิมไม่มีคอมโพเนนต์สำเร็จรูปเหมือน CSS framework เจ้าอื่น ทำให้อาจต้องใช้เวลาในการเขียนขึ้นมาใช้เอง แต่ปัจจุบันมีเว็บที่ทำคอมโพเนนต์สำเร็จรูปแล้วที่ https://tailwindui.com/
ชื่อคลาสของคอมโพเนนต์จะยาวมาก หากนำหลายๆ คลาสย่อยมารวมกัน

สำหรับบทความนี้ก็ขอจบลงไว้เพียงเท่านี้ก่อน ไว้บทความหน้าถ้ามีโอกาส เราจะพาลงลึกรายละเอียดเจ้า Tailwind CSS กัน

ที่มา:

https://tailwindcss.com/

https://tailwindcss.com/docs/

บทความที่เกี่ยวข้อง:

เครื่องมือสร้าง Wireframe สำหรับนักออกแบบเว็บไซต์และแอปพลิเคชัน

Bootstrap 5 มีอะไรใหม่บ้าง

UX/UI Design คืออะไร