在顺风中同时将效果应用于多个伪类

Question

我正在寻找一种很好的速记法，将相同的效果应用于顺风中的多个伪类。

例如，我可能想将蓝色背景应用于 div 上的 :hover 和 :focus 状态。

目前我必须写以下内容：

<div className="hover:bg-blue focus:bg-blue>Text<div>

或者，我可以使用 apply 构建一个自定义类，如下所示：

.hover-focus-bg-blue {
  @apply hover:bg-blue focus:bg-blue
}

但是，当我必须应用复杂的状态时（在我当前的项目中，我需要覆盖一个元素上的 11 个状态（休息/悬停/活动/焦点/焦点可见/焦点可见 && 悬停等），这些都不是很好的选择。

apply 方法仅在多次使用时才保存代码。

我想看到的是这样的：

<div className="[hover, focus]:bg-blue">Text</div>

有谁知道类似的语法吗？到处都找不到。

Answer 1

这是一个经常被问到的问题。主要是将类分组为一个分组语法（例如，hover:(bg-red-500 border-2).

这是我在寻找这个问题的解决方案后收到的答案。简而言之，这个功能暂时不存在。（编辑：现在可以使用一些不同的工具来实现，请参阅答案的末尾。）尽管此答案指的是将实用程序分组到一个选择器中，但相同的逻辑应该适用于伪选择器的分组：

Tailwind 维护者确实曾一度考虑过此功能，但最终决定暂时搁置。请参阅此 Twitter 帖子：https://twitter.com/adamwathan/status/1461519820411789314

因此，正如您从答案和 Twitter 源中看到的那样，它目前处于搁置状态。在 Twitter 线程中，开发人员正在测试此功能的性能，与使用单独的实用程序相比，该功能在当前状态下看起来重复了 CSS：

因此，我们进行了一项测试，将每个 Tailwind UI 模板（超过 500 个文件）转换为使用分组语法，以了解在提供 HTML 服务时分组可以为您节省多少带宽。

仔细想想，这是有道理的，因为使用分组语法（如focus:(font-bold,underline)）会导致文档中的重复符号减少，因为现在有更多唯一的类名。

使用非分组语法，每个实例都focus:font-bold可以被压缩并替换为短占位符（例如％）。使用分组语法，focus:font-bold并且focus:(font-bold,underline) 不能被压缩出来，因为它们不再相同。情节扭曲：压缩后，文件实际上更大，而不是更小！

底线：

因此，这里的要点是，尽管在编写分组语法时看起来代码较少，但它实际上在生产中创建了更大的 CSS 文件和更大的 HTML 文件，使其成为一种非常黑白分明的性能反模式。

不过写起来更好，而且性能成本也不是很大，所以我们仍然有机会进一步开发它，只是为了喜欢它的人的开发体验。但不可否认的是，对于鼓励任何对绩效不利的事情犹豫不决。

更新

仅当 HTML/JSX 中的 CSS 类简单地保留原样时（例如 ），变体组导致 CSS 文件较大的缺点才成立focus:(font-bold,underline)。但是，如果它只是focus:font-bold focus: underline在构建时展开为完整变体 ( ) 的语法糖简写，那么对于包大小来说，它与手动键入相同，因此没有缺点，同时具有编码速度更快和可读性更强的优点源代码。

由于TailwindCSS仅限于纯粹生成CSS文件，因此它无法进行这样的转换。然而，有一些新的工具可用，例如UnoCSS，它与您的构建系统（例如Vite或Webpack）集成，还可以检查您的 HTML/JSX 并展开语法糖。看看这个游乐场尝试一下。