การสร้าง Custom Utilities ด้วย @layer utilities

ในบทความก่อนหน้านี้ เราได้เรียนรู้เกี่ยวกับการใช้งาน Arbitrary Values เพื่อปรับแต่งสไตล์ได้อย่างรวดเร็ว แต่การใช้งาน Arbitrary Values มากเกินไปอาจทำให้โค้ดของเราไม่สอดคล้องและยากต่อการบำรุงรักษา ในบทนี้ เราจะมาเรียนรู้วิธีการสร้าง Custom Utilities ด้วย @layer utilities ซึ่งเป็นวิธีที่ช่วยให้เราสามารถสร้างคลาส CSS ที่กำหนดเอง (custom class) และนำกลับมาใช้ใหม่ได้ (reusable) ทำให้โค้ดของเราเป็นระเบียบและง่ายต่อการจัดการมากยิ่งขึ้น

Custom Utilities คืออะไร?

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

การกำหนด Utilities ใน CSS

การสร้าง Custom Utilities ใน Tailwind CSS ทำได้โดยการกำหนดคลาส CSS ภายใน @layer utilities directive ในไฟล์ CSS ของเรา (โดยปกติคือไฟล์ `tailwind.config.js` หรือไฟล์ CSS ที่ถูก import เข้าไปใน `tailwind.config.js`) @layer directive เป็นวิธีการจัดกลุ่ม CSS rules เพื่อให้ Tailwind CSS สามารถจัดการกับ order ของ CSS ได้อย่างถูกต้อง

ตัวอย่างเช่น หากเราต้องการสร้าง utility class ชื่อ .btn-primary ที่มีสีพื้นหลังสีฟ้าอ่อน ขอบมน และมี padding เราสามารถทำได้ดังนี้:

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  .btn-primary {
    @apply bg-blue-100 rounded-md py-2 px-4 font-semibold text-blue-700 hover:bg-blue-200;
  }
}

ในตัวอย่างนี้:

@tailwind base;, @tailwind components;, และ @tailwind utilities; คือ directives ที่ Tailwind CSS ใช้เพื่อ inject styles พื้นฐาน, styles ของ components, และ styles ของ utilities ตามลำดับ
@layer utilities { ... } คือการกำหนดว่า CSS rules ภายใน block นี้ จะถูกจัดอยู่ใน layer ที่เรียกว่า "utilities"
.btn-primary { ... } คือการกำหนด CSS rule สำหรับคลาส .btn-primary
@apply bg-blue-100 rounded-md py-2 px-4 font-semibold text-blue-700 hover:bg-blue-200; คือการใช้ @apply directive เพื่อนำเอา utility classes ของ Tailwind CSS มาใช้กับคลาส .btn-primary

หลังจากที่เรากำหนด Custom Utility แล้ว เราสามารถนำไปใช้ใน HTML ได้ดังนี้:

<button class="btn-primary">Primary Button</button>

ผลลัพธ์ที่ได้คือปุ่มที่มีสีพื้นหลังสีฟ้าอ่อน ขอบมน และมี padding ตามที่เรากำหนดไว้ใน Custom Utility

การใช้ @apply

@apply directive เป็นเครื่องมือที่สำคัญในการสร้าง Custom Utilities มันช่วยให้เราสามารถนำเอา utility classes ของ Tailwind CSS มาใช้ร่วมกันได้อย่างง่ายดาย ทำให้เราไม่ต้องเขียน CSS เองทั้งหมด

ข้อดีของการใช้ @apply คือ:

Reuse: สามารถนำ utility classes ของ Tailwind CSS มาใช้ซ้ำได้
Maintainability: หาก utility classes ของ Tailwind CSS มีการเปลี่ยนแปลง Custom Utilities ของเราก็จะได้รับการอัปเดตโดยอัตโนมัติ
Consistency: ช่วยให้สไตล์ของเรามีความสอดคล้องกันมากขึ้น

นอกจากนี้ เรายังสามารถใช้ @apply ร่วมกับ CSS properties อื่นๆ ได้ ตัวอย่างเช่น:

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  .btn-custom {
    @apply bg-green-500 text-white font-bold py-2 px-4 rounded;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }
}

ในตัวอย่างนี้ เราได้ใช้ @apply เพื่อกำหนดสีพื้นหลัง สีตัวอักษร ตัวหนา padding และขอบมน และเรายังได้เพิ่ม box-shadow property เพื่อเพิ่มเงาให้กับปุ่ม

การจัดการ Specificity

Specificity คือกฎที่ CSS ใช้ในการตัดสินว่า styles ใดควรถูกนำมาใช้เมื่อมี styles ที่ขัดแย้งกัน Specificity ของ CSS rule ถูกกำหนดโดย selector ที่ใช้ หาก selector มีความเฉพาะเจาะจงมาก Styles ที่กำหนดไว้ใน CSS rule นั้นก็จะมีความสำคัญมากกว่า

เมื่อเราสร้าง Custom Utilities ด้วย @layer utilities Tailwind CSS จะพยายามจัดการ specificity ให้เหมาะสม แต่ในบางครั้งเราอาจจำเป็นต้องจัดการ specificity ด้วยตัวเอง

วิธีการจัดการ specificity ที่พบบ่อยคือ:

การใช้ !important: การเพิ่ม !important หลัง CSS property จะทำให้ property นั้นมีความสำคัญสูงสุด แต่ควรใช้อย่างระมัดระวัง เพราะอาจทำให้เกิดปัญหาในการบำรุงรักษาในระยะยาว
การเพิ่ม specificity ให้กับ selector: เราสามารถเพิ่ม specificity ให้กับ selector ได้โดยการเพิ่ม class หรือ ID ให้กับ selector ตัวอย่างเช่น:

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  .btn-primary {
    @apply bg-blue-500 text-white font-bold py-2 px-4 rounded;
  }

  .dark .btn-primary { /* เพิ่ม specificity โดยการเพิ่ม .dark */
    @apply bg-blue-700;
  }
}

ในตัวอย่างนี้ เราได้เพิ่ม class .dark ให้กับ selector .btn-primary ซึ่งจะทำให้ styles ที่กำหนดไว้ใน .dark .btn-primary มีความสำคัญมากกว่า styles ที่กำหนดไว้ใน .btn-primary

การใช้ Variants: อีกวิธีที่แนะนำคือการใช้ Variants (ซึ่งเราจะเรียนรู้ในบทถัดไป) เพื่อกำหนด styles ที่แตกต่างกันตามเงื่อนไขต่างๆ เช่น hover, focus, active, dark mode เป็นต้น

ข้อควรระวังในการสร้าง Custom Utilities

ถึงแม้ว่า Custom Utilities จะเป็นเครื่องมือที่มีประโยชน์ แต่ก็ควรใช้อย่างระมัดระวัง เพื่อหลีกเลี่ยงปัญหาที่อาจเกิดขึ้น:

หลีกเลี่ยงการสร้าง Custom Utilities ที่ซ้ำซ้อน: ก่อนที่จะสร้าง Custom Utility ควรตรวจสอบให้แน่ใจว่า utility classes ของ Tailwind CSS ที่มีอยู่ไม่สามารถตอบโจทย์ความต้องการของเราได้
ตั้งชื่อ Custom Utilities ให้สื่อความหมาย: ชื่อของ Custom Utilities ควรสื่อความหมายและบอกได้ว่า utility นั้นทำอะไร
จำกัดจำนวน Custom Utilities: การมี Custom Utilities มากเกินไปอาจทำให้โค้ดของเราซับซ้อนและยากต่อการบำรุงรักษา

สรุป

การสร้าง Custom Utilities ด้วย @layer utilities เป็นวิธีที่ช่วยให้เราสามารถสร้างคลาส CSS ที่กำหนดเองและนำกลับมาใช้ใหม่ได้ ทำให้โค้ดของเราเป็นระเบียบและง่ายต่อการจัดการมากยิ่งขึ้น การใช้ @apply directive ช่วยให้เราสามารถนำเอา utility classes ของ Tailwind CSS มาใช้ร่วมกันได้อย่างง่ายดาย และการจัดการ specificity อย่างเหมาะสมจะช่วยให้ styles ของเราทำงานได้อย่างถูกต้อง ในบทถัดไป เราจะมาเรียนรู้เกี่ยวกับการใช้งาน Variants อย่างละเอียด ซึ่งเป็นอีกหนึ่งเครื่องมือที่สำคัญในการปรับแต่งสไตล์ด้วย Tailwind CSS