เปรียบเทียบการใช้งาน CSS ธรรมดา กับ Tailwind CSS

สารจากผู้เขียน

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

CSS คืออะไร?

CSS (Castcading Style Sheet) คือ ภาษาที่ใช้ในการตกแต่งหน้าเว็บของเราให้มีสีสัน สวยงามขึ้น

CSS Framework คืออะไร?

CSS Framework คือ ชุดคำสั่ง CSS ที่ถูกเขียนไว้ล่วงหน้าแล้ว เราสามารถเรียกใช้งานได้เลย ตัวอย่าง
CSS Framework ที่ได้รับความนิยม เช่น Bootstrap, Tailwind, Semantic UI เป็นต้น

ทำความรู้จักกับ Tailwind CSS

Tailwind CSS คือ CSS Framework ตัวหนึ่งที่ใช้งานแบบ Utility-first หมายถึงแต่ละ class จะมีคุณสมบัติย่อย ๆ ของ CSS เก็บในตัวของมันอย่างละหนึ เช่น Background-color, Border, font-size ฯลฯ ซึ่งเหมาะกับคนที่ต้องการปรับแต่งหน้าเว็บอย่างอิสระ เพราะแต่ละ class นั้นเก็บคำสั่ง CSS ไว้แค่อย่างละหนึ่ง ไม่ใช่ Class component สำเร็จรูปที่รวมหลาย ๆ ชุดคำสั่ง เราสามารถเข้าไปที่ tailwindcss.com อ่านรายละเอียดของ class แต่ละตัวได้

เปรียบเทียบ CSS กับ TailwindCSS

CSS เราต้องตั้งชื่อ class และใส่คำสั่ง css เอง

.Btn {
  width: 36px;
  height: auto;
  padding: 8px;
}

<button class="Btn">click</button>

ข้อดี

• ในหนึ่ง class เราสามารถจัดให้มีคำสั่ง CSS หลาย ๆ คำสั่งได้
• Custom ได้อย่างอิสระ

ข้อเสีย

• ใช้ระยะเวลานานในการสร้าง Project
• การแสดงผลใน web browser ไม่คงที่ ทำให้กินเวลาในการแก้ไข style

Tailwind CSS เราสามารถใส่ class ย่อย ๆ ที่มีคำสั่ง CSS เข้าไปได้เลย

<button class="w-8 h-auto p-2">click</button>

ข้อดี

• มี utility class ช่วยให้ประหยัดเวลาในการเขียน CSS
• การแสดงผลใน web browser คงที่
• มี component, Plugin ให้เลือกใช้ เช่น Daisy-UI
• Custom ได้ค่อนข้างเยอะถ้าเทียบกับ CSS Framework ตัวอื่น

ข้อเสีย

• เนื่องจากการใช้งานต้องใส่ class เพื่อเรียก css ทำให้ต้องใส่หลาย ๆ class ในแต่ละ tag ของ html บางคนอาจจะไม่ชอบให้มี class เยอะ ๆ ใน tag
• ไม่ค่อยตอบโจทย์สำหรับคนที่ต้องการใช้ Class ระดับ component (รวม CSS หลาย ๆ คำสั่ง)

จะใช้งาน CSS ร่วมกับ Tailwind CSS อย่างไร?

เราสามารถ apply class ของ tailwind เข้าไปใน class ที่เราสร้างขึ้นได้ เพื่อให้โค้ดดูเป็นระเบียบมากขึ้น

@tailwind base;
@tailwind components;
@tailwind utilities;
.btn-primary {
    @apply py-2 px-4 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75;
  }

<!-- ก่อนใช้ -->
<button class="py-2 px-4 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75">click</button>

<!-- หลังใช้ -->
<button class="btn-primary">click</button>

สรุป

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

อ้างอิง

1. ยังจำเป็นต้องเรียนรู้ pure css ไหมและ css framework เข้ามามีบทบาทอย่างไร จาก: https://danusoncheounsanguan.medium.com/ยังจำเป็นต้องเรียนรู้-pure-css-ไหมและ-css-framework-เข้ามามีบทบาทอย่างไร-92c1696c3b2
2. Extracting classes with @apply จาก: https://tailwindcss.com/docs/reusing-styles#extracting-classes-with-apply