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，最終生成的選擇器是 .hover\:m-2:hover

作为结果，以下 CSS 将被生成：

css

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

通过这种方式，我们可以仅在用户悬停在元素上时应用 m-2。

进一步学习

变体系统非常强大，无法在本指南中完全覆盖，你可以查看默认预设的实现以了解更多高级用法。