【发布时间】：2022-10-23 19:52:36
【问题描述】：
是否可以在顺风中对pseudo selectors 进行分组？
例如转换这个：
<div class="before:w-5 before:h-5">hello world</div>
类似于：
<div class="before:[w-5 h-5]">hello world</div>
【问题讨论】：
标签： html tailwind-css
【发布时间】：2022-10-23 19:52:36
【问题描述】：
我对你的问题的答案很感兴趣。我绝对认为拥有这种功能将是一个很棒的功能。我尝试访问 Tailwind 的不和谐服务器，并打开了一个线程来询问这个问题。这是我收到的答案：
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 文件，使其成为非常黑白的性能反模式。
虽然写起来更好，而且性能成本不是很大，所以我们仍然有机会进一步开发它，只是为了给喜欢它的人提供开发者体验。但诚然不愿鼓励任何不利于表现的事情。
【讨论】：