變體 (Variants)

變體 (Variants) 允許您將一些變化應用到現有的規則，例如 Tailwind CSS 的 hover: 變體。

範例

ts

variants: [
  // hover:
  (matcher) => {
    if (!matcher.startsWith('hover:'))
      return matcher
    return {
      // slice `hover:` prefix and passed to the next variants and rules
      matcher: matcher.slice(6),
      selector: s => `${s}:hover`,
    }
  },
],
rules: [
  [/^m-(\d)$/, ([, d]) => ({ margin: `${d / 4}rem` })],
]

matcher 控制變體何時啟用。如果返回值是一個字串，它將被用作匹配規則的選擇器。
selector 提供了自訂生成的 CSS 選擇器的可能性。

底層原理

讓我們來看看匹配 hover:m-2 時發生了什麼

hover:m-2 是從使用者使用情況中提取的
hover:m-2 發送到所有變體進行匹配
hover:m-2 與我們的變體匹配並返回 m-2
結果 m-2 將用於下一輪的變體匹配
如果沒有其他變體匹配，m-2 將會去匹配規則
我們的第一條規則匹配並生成 .m-2 { margin: 0.5rem; }
最後，我們將變體的轉換應用到生成的 CSS。在這種情況下，我們在 selector 鉤子前面加上了 :hover

因此，將會生成以下 CSS

css

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

這樣，我們就可以讓 m-2 只在使用者滑鼠懸停在元素上時才應用。

進一步了解

變體系統非常強大，本指南無法完整涵蓋，您可以查看預設預設集的實現以了解更進階的用法。