如何避免Tailwind CSS中重复输入dark:等伪类前缀，实现分组嵌套？

Tailwind CSS（尤其是JIT模式开启后）支持几种方式帮你减少重复前缀的书写，不用每次都写dark:、hover:这类前缀：

1. 官方原生分组语法（推荐） #

从Tailwind v3.1开始，支持前缀分组语法，你可以把同前缀的工具类放在括号里，写法如下：

class="dark:[text-white,bg-red,hover:text-blue,focus:bg-yellow]"

编译后会自动展开成你原来的dark:text-white dark:bg-red dark:hover:text-blue dark:focus:bg-yellow，完全匹配你的需求。

注意：这个功能在Tailwind v3中默认开启JIT模式，v2版本需要手动在配置文件中开启JIT。

2. 在CSS中用@apply封装复用 #

如果觉得HTML里的写法还是繁琐，可以在自定义CSS文件中用@apply把同前缀的样式封装成自定义类，比如：

.dark-card {
  @apply text-white bg-red;
}
.dark .dark-card:hover {
  @apply text-blue;
}
.dark .dark-card:focus {
  @apply bg-yellow;
}

之后HTML里直接使用：

class="dark-card"

这种方式适合需要多次复用的样式组，后续维护更便捷。

3. 结合预处理器实现嵌套写法 #

你提到的类似SCSS的嵌套逻辑，Tailwind的HTML类名本身不支持，但可以结合SCSS预处理器在CSS中实现：

.card {
  // 基础样式
  .dark & {
    @apply text-white bg-red;
    &:hover { @apply text-blue; }
    &:focus { @apply bg-yellow; }
  }
}

只需确保你的项目已配置SCSS预处理器支持即可。

内容的提问来源于stack exchange，提问作者MaximoConn