Variants

Variants อนุญาตให้คุณนำการเปลี่ยนแปลงบางอย่างไปใช้กับกฎที่มีอยู่ของคุณ เช่น variant hover: จาก Tailwind CSS

ตัวอย่าง

ts

variants: [
  // hover:
  (matcher) => {
    if (!matcher.startsWith('hover:'))
      return matcher
    return {
      // ตัดคำนำหน้า `hover:` และส่งไปยัง variants และกฎถัดไป
      matcher: matcher.slice(6),
      selector: s => `${s}:hover`,
    }
  },
],
rules: [
  [/^m-(\d)$/, ([, d]) => ({ margin: `${d / 4}rem` })],
]

matcher ควบคุมเมื่อใดที่ variant ถูกเปิดใช้งาน หากค่าที่ส่งคืนเป็นสตริง มันจะถูกใช้เป็น selector สำหรับการจับคู่กฎ
selector จัดหาความสามารถในการปรับแต่ง CSS selector ที่สร้างขึ้น

ภายใน

มาทัวร์ดูสิ่งที่เกิดขึ้นเมื่อจับคู่สำหรับ hover:m-2:

hover:m-2 ถูกแยกจากการใช้งานของผู้ใช้
hover:m-2 ส่งไปยัง variants ทั้งหมดสำหรับการจับคู่
hover:m-2 ถูกจับคู่โดย variant ของเราและส่งคืน m-2
ผลลัพธ์ m-2 จะถูกใช้สำหรับรอบถัดไปของการจับคู่ variants
หากไม่มี variant อื่นที่จับคู่ m-2 จะไปจับคู่กฎ
กฎแรกของเราจับคู่และสร้าง .m-2 { margin: 0.5rem; }
สุดท้าย เรานำการแปลงของ variants ไปใช้กับ CSS ที่สร้างขึ้น ในกรณีนี้ เราเติม :hover ไปยัง hook selector

เป็นผลลัพธ์ CSS ต่อไปนี้จะถูกสร้าง:

css

.hover\:m-2:hover { margin: 0.5rem; }

ด้วยสิ่งนี้ เราสามารถมี m-2 นำไปใช้เมื่อผู้ใช้ hover บน element

ไปต่อ

ระบบ variant นั้นทรงพลังมากและไม่สามารถครอบคลุมได้ทั้งหมดในคู่มือนี้ คุณสามารถตรวจสอบ การใช้งาน default preset เพื่อดูการใช้งานขั้นสูงเพิ่มเติม