AI

Tailwindcss Advanced Techniques

📅 2026-02-09 | โดย อ.บอม กิตติทัศน์ เจริญพนาสิทธิ์ — SiamCafe.net Since 1997

Tailwindcss Advanced Techniques คืออะไร / ทำไมถึงสำคัญ

น้องๆ หลายคนอาจจะคุ้นเคยกับการใช้ Tailwind CSS แบบพื้นฐานกันอยู่แล้ว คือการเอา class ต่างๆ มาใส่ใน HTML element ของเราโดยตรง ใช่มะ? แต่นั่นมันแค่จุดเริ่มต้นเว้ย! Tailwind มันมีลูกเล่นที่ลึกกว่านั้นเยอะ ที่พี่เรียกว่า "Advanced Techniques" เนี่ย มันคือการใช้ประโยชน์จากความสามารถที่ซ่อนอยู่ของ Tailwind เพื่อให้เราเขียน CSS ได้ง่ายขึ้น, maintain ง่ายขึ้น, และที่สำคัญคือ performance ดีขึ้นด้วย

สมัยพี่ทำร้านเน็ต SiamCafe นะ (แอบโปรโมท SiamCafe Blog นิดนึง) เว็บไซต์ร้านนี่แหละตัวดีเลย ต้องปรับเปลี่ยนตลอดเวลา promotion มาใหม่ รูปใหม่ content ใหม่ ถ้า CSS ไม่ดีนี่ปวดหัวเลย Advanced techniques นี่แหละช่วยชีวิตพี่ไว้เยอะ

ทำไมมันถึงสำคัญ? ลองนึกภาพว่าเรามี component ที่ต้องใช้ซ้ำๆ กันเยอะมาก แล้วแต่ละ component มี styling ที่คล้ายๆ กัน แต่ไม่เหมือนกันเป๊ะๆ ถ้าเราต้อง copy-paste class ไปเรื่อยๆ โค้ดเราจะรกมาก แก้ไขทีนึงก็ต้องแก้หลายที่ เสียเวลาโคตรๆ แต่ถ้าเราใช้พวก utility-first approach ของ Tailwind ให้เป็นประโยชน์, ใช้พวก function, directive ต่างๆ เนี่ย เราจะเขียนโค้ดได้ clean ขึ้นเยอะ และที่สำคัญคือมันช่วยให้เราทำงานเป็นทีมได้ง่ายขึ้นด้วย

พื้นฐานที่ต้องรู้

ก่อนจะไปถึงขั้น Advanced เนี่ย เราต้องมีพื้นฐานที่แน่นก่อนนะ เหมือนสร้างบ้านอะ ถ้าฐานไม่ดี บ้านก็พัง! พื้นฐานที่สำคัญที่น้องๆ ต้องรู้มีดังนี้:

Utility-First Fundamentals

Utility-first คือหัวใจของ Tailwind CSS เลย น้องๆ ต้องเข้าใจ concept นี้อย่างถ่องแท้ คือการที่เราใช้ class ต่างๆ ที่ Tailwind เตรียมไว้ให้ (เช่น text-center, bg-blue-500, py-2) แทนที่จะเขียน CSS เองทั้งหมด

สมัยก่อนตอนยังไม่มี utility-first framework เนี่ย ชีวิตพี่ลำบากมาก ต้องมานั่งคิดชื่อ class เอง แล้วก็ต้องมานั่ง define property ต่างๆ เองใน CSS ไฟล์ กว่าจะเสร็จแต่ละ component นี่ใช้เวลาเป็นชาติ แต่พอมี Tailwind นี่ชีวิตง่ายขึ้นเยอะ แค่เอา class มาใส่ๆ ก็ได้แล้ว

Configuration File (tailwind.config.js)

tailwind.config.js คือไฟล์ที่เราใช้ปรับแต่งค่าต่างๆ ของ Tailwind CSS ตั้งแต่สี, font, spacing ไปจนถึง breakpoint ต่างๆ ถ้าเราเข้าใจไฟล์นี้ เราจะสามารถ customize Tailwind ให้เข้ากับ design system ของเราได้แบบสุดๆ

เคยเจอเคสที่ลูกค้าอยากได้สีที่มันเฉพาะเจาะจงมากๆ ไหม? แบบว่าสีเขียวมะกอกเบอร์ #อะไรก็ไม่รู้ ถ้าเราไม่รู้จัก tailwind.config.js เราก็ต้องไปนั่งเขียน CSS เอง แต่ถ้าเรารู้จัก เราก็แค่เพิ่มสีนั้นเข้าไปใน config file แล้วก็ใช้ class ที่เราสร้างขึ้นมาได้เลย ง่ายกว่าเยอะ!

วิธีใช้งาน / เริ่มต้นยังไง

เอาล่ะ! พอเรามีพื้นฐานที่แน่นแล้ว เรามาเริ่มลงมือทำกันเลยดีกว่า พี่จะสอน step-by-step ว่าเราจะเริ่มใช้งาน Advanced Techniques ของ Tailwind CSS ยังไง

ขั้นตอนปฏิบัติจริง

Using @apply Directive

@apply คือ directive ที่ช่วยให้เราสามารถเอา utility class ต่างๆ มารวมกันเป็น custom class ได้ สมมติว่าเรามี button ที่ต้องใช้ styling แบบเดิมๆ ซ้ำๆ กัน เราสามารถสร้าง class ชื่อ .btn แล้วใช้ @apply เพื่อใส่ utility class ต่างๆ เข้าไปได้เลย

/* styles.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .btn {
    @apply bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded;
  }
}

จาก code snippet ข้างบน เราสร้าง class ชื่อ .btn แล้วใช้ @apply เพื่อใส่ utility class ต่างๆ เข้าไป ทำให้เราไม่ต้อง copy-paste class พวกนี้ไปเรื่อยๆ อีกต่อไป

Extracting Components with @layer

@layer คือ directive ที่ช่วยให้เราจัดระเบียบ CSS ของเราได้ดีขึ้น เราสามารถแบ่ง CSS ของเราออกเป็น layer ต่างๆ เช่น base, components, utilities แล้ว Tailwind จะจัดการเรื่อง specificity ให้เราเอง

/* styles.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  body {
    @apply font-sans antialiased;
  }
}

@layer components {
  .card {
    @apply bg-white rounded-lg shadow-md p-4;
  }
}

@layer utilities {
  .truncate-text {
    @apply truncate;
  }
}

จาก code snippet ข้างบน เราแบ่ง CSS ของเราออกเป็น 3 layer คือ base, components, และ utilities ทำให้เราสามารถจัดการ CSS ของเราได้ง่ายขึ้น และ Tailwind จะจัดการเรื่อง specificity ให้เราเอง

Customizing with Functions

Tailwind CSS มี function ต่างๆ ที่เราสามารถใช้เพื่อ customize ค่าต่างๆ ได้ เช่น theme(), screen(), config()

/* tailwind.config.js */
module.exports = {
  theme: {
    extend: {
      colors: {
        'custom-blue': '#123456',
      },
    },
  },
}

/* styles.css */
.element {
  color: theme('colors.custom-blue');
}

จาก code snippet ข้างบน เราใช้ function theme() เพื่อดึงค่าสี custom-blue ที่เรา define ไว้ใน tailwind.config.js มาใช้

สมัยพี่ทำ SiamCafe เคยมี campaign ที่ต้องเปลี่ยนสี theme ของ website ทุกเดือน พี่ก็ใช้ function พวกนี้แหละช่วยชีวิต เปลี่ยนแค่ใน config file ที่เดียว ที่เหลือมันเปลี่ยนตามหมดเลย SiamCafe Blog มีบทความเกี่ยวกับเรื่องนี้ด้วยนะ ลองไปอ่านดูได้

เปรียบเทียบกับทางเลือกอื่น

แน่นอนว่า Tailwind CSS ไม่ใช่ framework เดียวในโลกนี้ ยังมีทางเลือกอื่นๆ อีกมากมาย เช่น Bootstrap, Material UI, Bulma แต่ละ framework ก็มีข้อดีข้อเสียแตกต่างกันไป

Framework	ข้อดี	ข้อเสีย
Tailwind CSS	Utility-first, highly customizable, small bundle size	Steep learning curve, verbose HTML
Bootstrap	Easy to learn, large community, pre-built components	Less customizable, larger bundle size
Material UI	React-based, follows Material Design principles, pre-built components	Limited customization, larger bundle size
Bulma	Easy to learn, clean syntax, responsive by default	Less customizable, smaller community

จากตารางข้างบน น้องๆ จะเห็นว่าแต่ละ framework ก็มีจุดเด่นจุดด้อยที่แตกต่างกันไป การเลือกใช้ framework ไหนก็ขึ้นอยู่กับความต้องการและ use case ของแต่ละโปรเจกต์

สำหรับพี่ พี่ชอบ Tailwind CSS เพราะมัน flexible มาก สามารถปรับแต่งได้ทุกอย่าง แถม bundle size ก็เล็ก ทำให้เว็บไซต์โหลดเร็ว แต่ถ้าใครที่ชอบอะไรที่มันสำเร็จรูป ใช้งานง่าย Bootstrap หรือ Material UI ก็อาจจะเป็นทางเลือกที่ดีกว่า

🎬 วิดีโอแนะนำ

ดูวิดีโอเพิ่มเติมเกี่ยวกับTailwindcss Advanced Technique:

Best Practices / เคล็ดลับจากประสบการณ์

เอาล่ะน้องๆ หลังจากที่เราลองเล่น Tailwind CSS กันไปพอสมควรแล้ว คราวนี้มาถึงช่วงที่พี่จะแชร์ประสบการณ์ตรงจากหน้างานจริงกันบ้าง สมัยพี่ทำเว็บให้ลูกค้า พี่เจอปัญหาอะไรบ้าง และแก้ยังไงให้มัน Work จริงๆ

จำไว้เลยว่า Tailwind CSS มัน Powerful มาก แต่มันก็เหมือนดาบสองคม ถ้าใช้ไม่ดี แทนที่จะเร็ว กลายเป็นช้ากว่าเดิมอีก

เทคนิคที่ 1: Extract Component ให้เป็นนิสัย

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

วิธีแก้คือ Extract Component! สร้างไฟล์ CSS แยกออกมา แล้วใช้ @apply เพื่อดึง Class จาก Tailwind CSS มาใช้รวมกัน

.btn {
  @apply bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded;
}

พอทำแบบนี้แล้ว เวลาจะใช้ปุ่ม ก็แค่ใส่ Class btn ใน HTML ง่ายกว่าเยอะ แถมถ้าอยากเปลี่ยน Style ปุ่ม ก็แก้แค่ที่ไฟล์ CSS ที่เดียว จบ!

เทคนิคที่ 2: Config ให้ละเอียดตั้งแต่เริ่ม

Tailwind CSS มัน Config ได้เยอะมาก ตั้งแต่สี Font จนถึง Breakpoint พี่แนะนำว่าให้ใช้เวลา Config มันตั้งแต่เริ่มเลย จะช่วยประหยัดเวลาไปได้เยอะในระยะยาว

ยกตัวอย่างเช่น ถ้าเรามีสีที่ใช้ประจำ ก็ให้ Define สีนั้นไว้ใน tailwind.config.js เลย

module.exports = {
  theme: {
    extend: {
      colors: {
        'primary': '#FF0000', // สีแดงที่เราใช้บ่อยๆ
        'secondary': '#00FF00', // สีเขียว
      },
    },
  },
}

พอ Config แล้ว เราก็สามารถใช้สี primary หรือ secondary ใน Class ได้เลย เช่น text-primary, bg-secondary

เทคนิคที่ 3: อย่ากลัวที่จะ Custom Plugin

บางที Tailwind CSS ที่มีมาให้ มันก็ยังไม่ตอบโจทย์เราทั้งหมด พี่เคยเจอเคสที่ต้องทำ Animation แปลกๆ ที่ Tailwind CSS ไม่มีให้ ก็เลยต้องเขียน Plugin เอง

การเขียน Plugin Tailwind CSS ไม่ได้ยากอย่างที่คิด ลองศึกษา Documentation ดู แล้วจะรู้ว่ามัน Powerful มาก

เทคนิคที่ 4: Purge CSS ให้ดี

ปัญหาหลักๆ ของ Tailwind CSS คือ File CSS มันใหญ่มาก เพราะมัน Generate Class มาให้เยอะแยะเต็มไปหมด แต่เราไม่ได้ใช้ทุก Class แน่นอน

ดังนั้น สิ่งที่ต้องทำคือ Purge CSS! บอก Tailwind CSS ว่าให้ลบ Class ที่ไม่ได้ใช้ออกไป ซึ่ง Tailwind CSS มี Tool ให้ใช้ฟรีๆ อยู่แล้ว อย่าลืม Config ให้ถูกต้องด้วยนะ

FAQ คำถามที่พบบ่อย

Tailwind CSS เหมาะกับ Project แบบไหน?

เหมาะกับ Project ทุกขนาดเลยน้อง ตั้งแต่ Project เล็กๆ ไปจนถึง Project ใหญ่ๆ แต่ถ้าเป็น Project ใหญ่ๆ ต้อง Config ให้ดีตั้งแต่เริ่ม ไม่งั้นจะปวดหัวทีหลัง

Tailwind CSS เรียนยากไหม?

ไม่ยากเท่า CSS ปกติหรอกน้อง เพราะมันมี Class ให้ใช้เยอะแยะไปหมด แต่ต้องทำความเข้าใจ Concept ของมันก่อนนะ

ใช้ Tailwind CSS แล้วเว็บจะช้าไหม?

ถ้าไม่ Purge CSS เว็บจะช้าแน่นอน แต่ถ้า Purge CSS ดีๆ เว็บจะเร็วขึ้นด้วยซ้ำ เพราะ File CSS มันเล็กลง

Tailwind CSS กับ Component Library อย่าง Ant Design, Material UI อันไหนดีกว่ากัน?

มันคนละแบบกันน้อง Tailwind CSS เป็น Utility-First CSS Framework ส่วน Ant Design, Material UI เป็น Component Library ที่มี Component สำเร็จรูปให้ใช้เลย เลือกใช้ตามความเหมาะสมของ Project

มี Tool อะไรที่ช่วยให้ใช้ Tailwind CSS ง่ายขึ้นบ้าง?

มีเยอะแยะเลยน้อง ทั้ง VS Code Extension, Online Generator, Plugin สำหรับ Framework ต่างๆ ลองหาดูใน Google ได้เลย

สรุป

Tailwind CSS เป็น Tool ที่ดีมากๆ ถ้าใช้เป็น แต่ต้องเข้าใจ Concept ของมันก่อน และต้อง Config ให้ดีตั้งแต่เริ่ม อย่ากลัวที่จะ Custom Plugin และอย่าลืม Purge CSS ด้วยนะ

สมัยพี่ทำ iCafeForex ก็ใช้ Tailwind CSS นี่แหละ ช่วยให้ Development เร็วขึ้นเยอะเลย น้องๆ ลองเอาไปปรับใช้กันดูนะ

สุดท้ายนี้ ถ้าอยากอ่านบทความเกี่ยวกับ IT สนุกๆ แบบนี้อีก ก็แวะมาที่ SiamCafe Blog ได้นะ พี่เขียนไว้เยอะแยะเลย!