有什么方法可以在 Tailwind 中对伪选择器进行分组吗？

Question

pseudo selectors顺风可以组团吗？

例如转换这个：

<div class="before:w-5 before:h-5">hello world</div>

像这样的东西：

<div class="before:[w-5 h-5]">hello world</div>

Answer 1

我对你问题的答案非常感兴趣。我绝对认为拥有这种功能将是一个很棒的功能。我尝试访问 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 文件，使其成为一种非常黑白分明的性能反模式。

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