如何将Tailwind CSS v4的 @variant规则分组？

前端开发 2026-07-09

在Tailwind CSS v4中，引入了CSS优先的新配置，变体可以通过 @variant {variant-name} 来定义。

例如，像下面这样的工具类：hover:not-focus:bg-sky-900

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/[email protected]"></script>
<style type="text/tailwindcss">
.example {
  @apply size-32 bg-sky-300 hover:not-focus:bg-sky-900;
}
</style>

<input class="example">

可以用CSS表达为如下：

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/[email protected]"></script>
<style type="text/tailwindcss">
.example {
  width: --spacing(32);
  height: --spacing(32);
  background-color: var(--color-sky-300);

  @variant hover {
    @variant not-focus {
      background-color: var(--color-sky-900);
    }
  }
}
</style>

<input class="example">

我的问题是：如何将多个变体分组在一起，这样就不需要把 @variant 规则逐层嵌套？例如，是否有办法写出等价于 hover:not-focus: 的单一分组变体？

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/[email protected]"></script>
<style type="text/tailwindcss">
.example {
  width: --spacing(32);
  height: --spacing(32);
  background-color: var(--color-sky-300);

  @variant hover:not-focus {
    background-color: var(--color-sky-900);
  }
}
</style>

<input class="example" value="not working in v4.2">

解决方案

这一特性自Tailwind CSS [v4.3] 起得到支持，借助 [PR #19996] 中引入的 @variant 分组语法。

你可以使用逗号来定义“或”条件，就像原生CSS一样；也可以使用冒号将变体叠放，方式与在内联Tailwind CSS类名中使用的一样。

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/[email protected]"></script>
<style type="text/tailwindcss">
.example {
  width: --spacing(32);
  height: --spacing(32);
  background-color: var(--color-sky-300);

  @variant hover:not-focus {
    background-color: var(--color-sky-900);
  }

  @variant hover, focus {
    border: 4px solid black;
  }
}
</style>

<input class="example">

你还可以在该PR的测试文件和注释中找到更多使用示例：

packages/tailwindcss/src/index.test.ts

@variant hover { /* ... */ }
@variant focus { /* ... */ }
@variant hover, focus { /* ... */ }
@variant [&:is(:hover,:focus)], disabled { /* ... */ }
@variant hover:focus { /* ... */ }
@variant hover:focus, disabled { /* ... */ }
@variant [&:is(:hover,:focus)]:disabled, aria-disabled:hover { /* ... */ }
/* etc. */

Tailwind CSS