พอดีเจอปัญหาเรื่องการใช้งาน class name แบบ dynamic แล้ว มันไม่แสดงผล เลยได้เรียนรู้เพิ่มเติมว่ามันควรเขียนอย่างไร ซึ่งเราไม่ได้อ่านเอง แถมมันเป็น Core concepts ซะด้วย 😅

Detecting classes in source files - Core concepts
Understanding and customizing how Tailwind scans your source files.
Tailwind CSS

Dynamic class names

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

เนื่องจาก Tailwind สแกนไฟล์ต้นฉบับเป็นแบบ plain text แต่มันไม่ได้พยายามวิเคราะห์โค้ดจริงๆ เหมือนเครื่องมืออื่น ๆ เช่น Babel หรือ TypeScript แต่จะมองหาข้อความที่ตรงกับรูปแบบของชื่อคลาสที่คาดหวัง

เราควรเขียนแบบไหน

ทีนี้เรามาดูกันว่า แบบไหนที่เราไม่ควรเขียน และ ควรเขียน

อย่าสร้างชื่อคลาสแบบ dynamic

เราควรเขียนให้มั่นใจว่ามีชื่อคลาสที่เราจะใช้อยู่ครบถ้วนจริง ดังนั้นเราควรใช้ ชื่อคลาสแบบเต็มเสมอ

❌ ตัวอย่างที่ไม่ควรใช้

<div class="text-{{ error ? 'red' : 'green' }}-600"></div>

ในตัวอย่างข้างต้น สตริง text-red-600 และ text-green-600 ไม่มีอยู่ ดังนั้น Tailwind จะไม่สร้างคลาสเหล่านั้น

✅ วิธีที่ถูกต้อง

<div class="{{ error ? 'text-red-600' : 'text-green-600' }}"></div>

การใช้ Dynamic Class Names ใน React หรือ Vue

หากเรากำลังใช้ component library อย่าง React หรือ Vue เราไม่ควรใช้ props เพื่อสร้างคลาสแบบ dynamic

❌ ตัวอย่างที่ไม่ควรใช้

function Button({ color, children }) {
  return (
    <button className={`bg-${color}-600 hover:bg-${color}-500`}>
      {children}
    </button>
  )
}

เรียกใช้ component นี้

function Main() {
  return (
    <Button color="blue">
      Click Me
    <Button>
  )
}

ในกรณีนี้ Tailwind จะไม่สามารถสร้างคลาส bg-blue-600 หรือ bg-red-600 ได้

✅ วิธีที่ถูกต้อง

function Button({ color, children }) {
  const colorVariants = {
    blue: "bg-blue-600 hover:bg-blue-500",
    red: "bg-red-600 hover:bg-red-500",
  };

  return <button className={`${colorVariants[color]}`}>{children}</button>;
}

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

สรุป

  • หลีกเลี่ยงการสร้างชื่อ class แบบ dynamic โดยใช้ string concatenation หรือ interpolation
  • ใช้ชื่อ class แบบเต็ม เพื่อให้ Tailwind สามารถตรวจจับและสร้าง CSS ได้
  • ใน React/Vue ควรใช้ mapping เพื่อกำหนดค่าคลาสล่วงหน้า

การทำตามแนวทางเหล่านี้จะช่วยให้เราสามารถใช้ Tailwind CSS ได้อย่างมีประสิทธิภาพและหลีกเลี่ยงปัญหาที่อาจเกิดขึ้นจากการใช้ dynamic class names! ได้ 🚀