Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
79 lines (60 sloc) 6.8 KB
title description date author slug images tags
Tailwind CSS
Tailwind CSS เป็น CSS framework ที่ผมยกให้ดีที่สุดในตอนนี้เลยครับ 👍
2019-11-11 11:11:11 +0700
Pakin
tailwind-css
CSS
Web Design
Web Dev

Tailwind CSS เป็น CSS framework ที่ผมยกให้ดีที่สุดในตอนนี้เลยครับ 👍

Tailwind แตกต่างกับ CSS framework ส่วนใหญ่ตรงที่เป็น utility first ครับ อย่าง Bootstrap หรือ Bulma จะเน้น components เป็นหลัก แต่ Tailwind จะไม่มี components ใดๆ มาให้เลย มีแต่ utility ให้เรามาใช้เอง

อย่างสมมติผมอยากได้กล่องข้อความแบบนี้ ⬇

หัวข้อ
ข้อความ

ถ้าเราใช้ Bulma โค้ด HTML ของเราจะมีหน้าตาประมาณนี้

<div class="message is-danger">
  <div class="message-header">
    หัวข้อ
  </div>
  <div class="message-body">
    ข้อความ
  </div>
</div>

แต่ถ้าใช้ Tailwind เราจะเขียน HTML แบบนี้แทน

<div class="mb-4 text-base border-2 border-red-500 rounded">
  <div class="p-2 text-white font-bold bg-red-500 font-display">
    หัวข้อ
  </div>
  <div class="p-2 text-red-500 bg-red-100">
    ข้อความ
  </div>
</div>

เห็นครั้งแรกอาจรู้สึกว่าโค้ดมันรก มี class เยอะแยะเต็มไปหมด ซึ่ง class พวกนี้คือ utility class ครับ ลองอ่านชื่อ class แล้วอาจพอเดากันได้ แต่ละ class นั้นใช้กำหนด CSS หนึ่งอย่าง เช่น font-bold คือกำหนดให้เป็นตัวหนา หรือ bg-red-500 ก็กำหนดให้พื้นหลังเป็นสีแดง วิธีใช้คือเรานำ class ต่างๆ มาประกอบกันไปเรื่อยๆ ให้ได้รูปแบบตามที่เราต้องการ โค้ดเลยจะยาวๆ หน่อย

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

อย่างบล็อกนี้ก็เพิ่งเปลี่ยนจาก Bulma มาใช้ Tailwind ครับ ลอง inspect หรือดูซอร์สบน GitHub ได้เลย โดยผมนำมาปรับแต่งเพิ่ม class นิดหน่อยและใช้ร่วมกับ CSS custom properties เพื่อให้รองรับ dark theme 🌙

ข้อเสียอย่างเดียวของ Tailwind ที่ผมเจอคือมันอ้วนครับ ด้วยความที่ class มันเยอะมาก ถ้าไม่ปรับแต่งอะไรเลย ขนาดไฟล์หลัง minify แล้วจะอยู่ที่ 536KB (73KB Gzipped) เทียบกับ Bulma ที่ขนาดเพียง 189KB (24KB Gzipped) เท่านั้น

โดยทาง Tailwind ก็แนะนำให้ใช้ร่วมกับ Purgecss เพื่อลดขนาดไฟล์ อย่างในบล็อกนี้หลังใช้ Purgecss แล้วขนาดไฟล์เหลือแค่ 20KB (5KB Gzipped) ดังนั้นสำหรับโปรเจคเล็กๆ แล้ว Tailwind อาจไม่เหมาะครับ เพราะต้อง setup และกำหนดค่าเพิ่มเติม แทนที่เราจะแปะลิงก์ CDN แล้วใช้ได้เลย

สำหรับใครที่สนใจและอยากลองใช้งาน ทาง Tailwind มีคอร์สวิดีโอ Designing with Tailwind CSS ที่สอนการใช้งานและตั้งค่าต่างๆ อยู่ครับ แนะนำเลยหากใครอยากลอง 👍

ข้อมูลเพิ่มเติม

🍃 ตัวอย่างเว็บไซต์ที่ใช้ Tailwind CSS

ℹ ข้อมูลเพิ่มเติม

You can’t perform that action at this time.