Tailwind CSS: ปฏิวัติการเขียน CSS แบบเดิม ๆ ให้ไวขึ้น 10 เท่า!

phunsanit

7 ปี ago

สำหรับเหล่านักพัฒนาเว็บ (Web Developers) คงไม่มีใครไม่รู้จัก CSS แต่อุปสรรคคลาสสิกที่เรามักจะเจอกันบ่อย ๆ คือการต้องมานั่งคิดชื่อ Class เช่น .card-container, .btn-submit-v2 หรือปัญหาไฟล์ CSS บวมเป่งจนไล่เช็กไม่ไหว นี่คือเหตุผลที่ Tailwind CSS เกิดมาเพื่อเปลี่ยนชีวิตคนทำเว็บครับ

Tailwind CSS คืออะไร?

Tailwind CSS เป็น CSS Framework ประเภท Utility-First ซึ่งแตกต่างจาก Framework สำเร็จรูปอย่าง Bootstrap หรือ Bulma แทนที่จะให้ Component สำเร็จรูปอย่างปุ่มหรือการ์ดมาเลย Tailwind จะให้ “คลาสเครื่องมือขนาดเล็ก (Utility Classes)” มาให้เราเลือกผสมผสานเองใน HTML

เปรียบเทียบให้เห็นภาพ: > * Bootstrap: เหมือนเราซื้อเฟอร์นิเจอร์สำเร็จรูปจากห้างมาวาง สะดวก แต่อาจจะหน้าตาซ้ำกับบ้านคนอื่น

Tailwind CSS: เหมือนเราได้ตัวต่อ LEGO ชิ้นเล็กชิ้นน้อยมาสร้างบ้านเอง เราสามารถดีไซน์ให้มันหน้าตาเป็นแบบไหนก็ได้ตามใจชอบ โดยไม่ต้องแตะไฟล์ .css แยกเลยแม้แต่ประโยคเดียว

ความแตกต่างระหว่าง CSS แบบเดิม vs Tailwind CSS

ลองมาดูตัวอย่างการสร้าง ปุ่ม (Button) ง่าย ๆ กันครับ

แบบเดิม (Traditional CSS)

<button class="btn-primary">Click Me</button>

.btn-primary {
  background-color: #3b82f6;
  color: white;
  padding: 8px 16px;
  border-radius: 4px;
}

แบบ Tailwind CSS

<button class="bg-blue-500 text-white px-4 py-2 rounded">
  Click Me
</button>

จะเห็นว่าเราสามารถใส่ความสามารถอย่าง สีพื้นหลัง (bg-blue-500), สีตัวอักษร (text-white), Padding แนวแกน X (px-4), Padding แนวแกน Y (py-2) และความโค้ง (rounded) เข้าไปที่ HTML ได้โดยตรง

ทำไมต้องใช้ Tailwind CSS? (ข้อดีเด่น ๆ)

ไม่ต้องคิดชื่อ Class ให้ปวดหัว: จบปัญหาการยืนเถียงกับตัวเองว่าจะตั้งชื่อคลาสนี้ว่าอะไรดี
ไฟล์โค้ดขนาดเล็กและเบามาก: Tailwind มีระบบที่เรียกว่า PurgeCSS ซึ่งจะเข้ามาช่วย scan หาคลาสที่เราใช้จริง ๆ ในโปรเจกต์ แล้วจะตัดคลาสที่ไม่ได้ใช้ออกไปทั้งหมดตอน Build ทำให้ไฟล์ CSS ปลายทางมีขนาดเล็กจิ๋ว (มักจะเหลือน้อยกว่า 10KB ด้วยซ้ำ)
ทำ Responsive ได้ง่ายสุด ๆ : แค่เติม Prefix ด้านหน้าคลาส เช่น md: (สำหรับแท็บเล็ต) หรือ lg: (สำหรับหน้าจอคอม) เช่น
```
<div class="text-sm md:text-lg">ข้อความเปลี่ยนขนาดตามหน้าจอ</div>
```
ปรับแต่งง่าย (Customization): มีไฟล์ tailwind.config.js ให้เราสามารถเพิ่มโทนสี, ฟอนต์ หรือระยะขอบที่เป็นธีมของแบรนด์เราเองได้อย่างอิสระ

สรุป: Tailwind CSS เหมาะกับใคร?

Tailwind CSS เหมาะอย่างยิ่งกับนักพัฒนาที่ต้องการ ความรวดเร็วในการจัดหน้าเว็บ และ ต้องการอิสระในการดีไซน์ โดยไม่ต้องเขียนไฟล์ CSS แยกให้สับสนวุ่นวาย แต่อาจจะต้องใช้เวลาจำชื่อคลาสในช่วงแรกนิดหน่อย (ซึ่งถ้าใช้ควบคู่กับ Extension อย่าง Tailwind CSS IntelliSense ใน VS Code ก็แทบจะไม่ต้องจำเลยครับ)

หากคุณกำลังมองหาเครื่องมือที่จะช่วยให้การทำ Frontend สนุกและไวขึ้นอย่างก้าวกระโดด Tailwind CSS คือคำตอบที่ไม่ควรพลาดครับ!

อ่านเพิ่มเติม