การใช้งาน Variants อย่างละเอียด

การใช้งาน Variants อย่างละเอียดใน Tailwind CSS

ในบทที่แล้ว เราได้เรียนรู้เกี่ยวกับการปรับแต่ง `tailwind.config.js` เพื่อปรับ design system ของ Tailwind CSS ให้เข้ากับความต้องการของเรา ในบทนี้ เราจะมาเจาะลึกเรื่องของ Variants ซึ่งเป็นอีกหนึ่งฟีเจอร์ที่ทรงพลังของ Tailwind CSS ที่ช่วยให้เราสามารถปรับแต่งสไตล์ของ element ต่างๆ ตามเงื่อนไขหรือสถานะต่างๆ ได้อย่างง่ายดาย

Variants คืออะไร?

Variants ใน Tailwind CSS คือ modifiers ที่เราใช้เพื่อกำหนดสไตล์ที่แตกต่างกันให้กับ element ขึ้นอยู่กับสถานะ (state) หรือเงื่อนไขต่างๆ เช่น เมื่อเมาส์ hover อยู่บน element, เมื่อ element นั้นถูก focus, หรือเมื่อ element นั้นถูก disable

ตัวอย่างเช่น หากเราต้องการเปลี่ยนสีพื้นหลังของ button เมื่อเมาส์ hover อยู่เหนือ button เราสามารถใช้ variant `hover:` นำหน้า class utility ที่กำหนดสีพื้นหลังได้ดังนี้:

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  Hover me
</button>

ในโค้ดข้างต้น `bg-blue-500` กำหนดสีพื้นหลังเริ่มต้นเป็นสีฟ้า และ `hover:bg-blue-700` กำหนดให้สีพื้นหลังเปลี่ยนเป็นสีฟ้าเข้มขึ้นเมื่อเมาส์ hover อยู่เหนือ button

Variants พื้นฐานที่ Tailwind CSS มีให้

Tailwind CSS มี variants พื้นฐานให้เราใช้งานมากมาย ครอบคลุมสถานะและการทำงานทั่วไปของ element ต่างๆ ดังนี้:

• `hover:` ใช้เมื่อเมาส์ hover อยู่เหนือ element
• `focus:` ใช้เมื่อ element ได้รับ focus (เช่น เมื่อกด tab ไปที่ element)
• `active:` ใช้เมื่อ element ถูก active (เช่น เมื่อคลิกเมาส์ค้างไว้บน button)
• `disabled:` ใช้เมื่อ element ถูก disable
• `focus-visible:` ใช้เมื่อ element ได้รับ focus และ browser ตัดสินใจว่าควรแสดง focus ring
• `focus-within:` ใช้เมื่อ element หรือลูกหลานของ element ได้รับ focus
• `visited:` ใช้กับ links ที่ผู้ใช้เคยเข้าชมแล้ว
• `first:` ใช้กับ element แรกในกลุ่ม
• `last:` ใช้กับ element สุดท้ายในกลุ่ม
• `odd:` ใช้กับ element ที่มี index เป็นเลขคี่ในกลุ่ม
• `even:` ใช้กับ element ที่มี index เป็นเลขคู่ในกลุ่ม
• `group-hover:` ใช้เมื่อ element parent ที่มี class `group` ถูก hover
• `group-focus:` ใช้เมื่อ element parent ที่มี class `group` ถูก focus
• `peer-hover:` ใช้เมื่อ element sibling ที่มี class `peer` ถูก hover
• `peer-focus:` ใช้เมื่อ element sibling ที่มี class `peer` ถูก focus
• `dark:` ใช้เมื่อ dark mode ถูกเปิดใช้งาน (ต้องตั้งค่า dark mode ใน `tailwind.config.js` ก่อน)
• `motion-safe:` ใช้เมื่อผู้ใช้ไม่ได้เปิด Reduce Motion
• `motion-reduce:` ใช้เมื่อผู้ใช้เปิด Reduce Motion
• `print:` ใช้เมื่อพิมพ์หน้าเว็บ

ตัวอย่างการใช้งาน `focus:`:

<input type="text" class="border rounded px-2 py-1 focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Enter text">

ในโค้ดข้างต้น เมื่อ input field ได้รับ focus จะไม่มีเส้น outline และจะมีเส้นสีฟ้า (ring) ล้อมรอบแทน

การใช้งาน Variants ร่วมกัน

Variants สามารถใช้ร่วมกันได้ เพื่อกำหนดสไตล์ที่ซับซ้อนยิ่งขึ้น ตัวอย่างเช่น หากเราต้องการเปลี่ยนสีพื้นหลังของ button เมื่อเมาส์ hover อยู่เหนือ button และ button นั้นถูก disable เราสามารถใช้ variants `hover:` และ `disabled:` ร่วมกันได้ดังนี้:

<button class="bg-blue-500 hover:bg-blue-700 disabled:bg-gray-400 disabled:cursor-not-allowed text-white font-bold py-2 px-4 rounded" disabled>
  Submit
</button>

ในโค้ดข้างต้น `disabled:bg-gray-400` กำหนดให้สีพื้นหลังของ button เป็นสีเทาเมื่อ button ถูก disable และ `disabled:cursor-not-allowed` กำหนดให้ cursor เปลี่ยนเป็น `not-allowed` เพื่อบอกให้ผู้ใช้ทราบว่า button ไม่สามารถคลิกได้

เราสามารถใช้ variants ร่วมกันได้หลายตัว โดยเรียงลำดับตามความสำคัญ ตัวอย่างเช่น:

<a href="#" class="text-blue-500 hover:text-blue-700 focus:text-blue-900 focus:outline-none">
  Link
</a>

ในโค้ดนี้ เมื่อ hover จะเปลี่ยนเป็นสี `blue-700` และเมื่อ focus จะเปลี่ยนเป็นสี `blue-900` และเอา outline ออก

การสร้าง Custom Variants

นอกจาก variants พื้นฐานที่ Tailwind CSS มีให้แล้ว เรายังสามารถสร้าง custom variants ของเราเองได้ โดยการแก้ไขไฟล์ `tailwind.config.js` ในส่วนของ `variants`

ตัวอย่างเช่น หากเราต้องการสร้าง variant ที่ชื่อว่า `important:` เพื่อกำหนดสไตล์ให้กับ element ที่มีความสำคัญ เราสามารถทำได้ดังนี้:

// tailwind.config.js
module.exports = {
  theme: {
    // ...
  },
  variants: {
    extend: {
      backgroundColor: ['important'],
      textColor: ['important'],
    }
  },
  plugins: [],
}

ในโค้ดข้างต้น เราได้เพิ่ม variant `important` ให้กับ properties `backgroundColor` และ `textColor`

จากนั้นเราสามารถใช้งาน variant `important:` ได้ดังนี้:

<div class="bg-gray-100 important:bg-yellow-100 text-gray-700 important:text-red-700">
  This is important!
</div>

ในโค้ดข้างต้น `important:bg-yellow-100` กำหนดให้สีพื้นหลังของ div เป็นสีเหลืองเมื่อ variant `important` ถูกใช้งาน และ `important:text-red-700` กำหนดให้สีตัวอักษรเป็นสีแดงเมื่อ variant `important` ถูกใช้งาน

ข้อควรระวัง: การสร้าง Custom Variants อาจทำให้ไฟล์ CSS มีขนาดใหญ่ขึ้น ดังนั้นควรใช้เท่าที่จำเป็น

การเข้าใจ Order ของ Variants

ลำดับ (order) ของ variants มีความสำคัญ เนื่องจาก CSS จะใช้ rule ที่อยู่หลังสุดในการกำหนดสไตล์ให้กับ element หาก rule นั้นมีความเฉพาะเจาะจง (specificity) เท่ากัน

Tailwind CSS กำหนด order ของ variants ไว้ดังนี้:

1. `default` (ไม่มี variant)
2. `group-*`
3. `peer-*`
4. `hover`
5. `focus`
6. `focus-within`
7. `focus-visible`
8. `active`
9. `visited`
10. `disabled`
11. `odd`
12. `even`
13. `first`
14. `last`
15. `motion-safe`
16. `motion-reduce`
17. `dark`
18. `print`
19. `responsive` (breakpoints เช่น `sm`, `md`, `lg`, `xl`)

ดังนั้น หากเรากำหนดสไตล์ที่ขัดแย้งกันด้วย variants ที่แตกต่างกัน Tailwind CSS จะใช้สไตล์จาก variant ที่อยู่หลังสุดใน order ที่กำหนดไว้

ตัวอย่างเช่น:

<button class="bg-blue-500 hover:bg-red-500 focus:bg-green-500">
  Button
</button>

ในโค้ดข้างต้น เมื่อ hover อยู่เหนือ button สีพื้นหลังจะเป็นสีแดง (เพราะ `hover` มาก่อน `focus` ใน order) แต่เมื่อ button ได้รับ focus สีพื้นหลังจะเป็นสีเขียว (เพราะ `focus` มาทีหลัง `hover` ใน order)

หากต้องการ override order นี้ สามารถทำได้ผ่านการปรับแต่ง `tailwind.config.js` แต่โดยทั่วไปแล้ว order ที่ Tailwind CSS กำหนดไว้ก็เพียงพอต่อการใช้งานส่วนใหญ่

สรุป

Variants เป็นเครื่องมือที่สำคัญใน Tailwind CSS ที่ช่วยให้เราสามารถปรับแต่งสไตล์ของ element ต่างๆ ตามสถานะและเงื่อนไขต่างๆ ได้อย่างง่ายดาย การเข้าใจการทำงานของ variants และการใช้งานร่วมกันอย่างถูกต้อง จะช่วยให้เราสร้าง UI ที่มีความยืดหยุ่นและตอบสนองต่อผู้ใช้ได้อย่างมีประสิทธิภาพ ในบทต่อไป เราจะเรียนรู้เกี่ยวกับการใช้งาน Arbitrary Values ใน Tailwind CSS เพื่อกำหนดค่า CSS ที่ไม่ได้อยู่ในค่าเริ่มต้นของ Tailwind CSS