有办法在尾风中对伪选择器进行分组吗？

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的不和谐服务器，然后我打开了一个问这个问题的线程。这是我收到的答复：

​

​

是尾风的维护人员，曾经看过这个特性，但最终决定暂时搁置它。查看这个Twitter线程：https://twitter.com/adamwathan/status/1461519820411789314

因此，正如您从答案和Twitter提要中看到的那样，它目前处于暂停状态。在Twitter线程中，开发人员对此特性进行了性能测试，与使用单个实用程序相比，在当前状态下，该特性与CSS重复：

因此，我们做了一个测试，我们转换了每个Tailwind模板(超过500个文件)，以使用分组语法来查看在服务

时可以节省多少带宽。考虑到这一点，这是有意义的，因为使用分组语法(如focus:(font-bold,underline))可以减少文档中重复的符号，因为现在有了更多唯一的类名。使用非分组语法，可以将focus:font-bold的每个实例压缩并替换为短占位符(例如%)。使用分组语法，focus:font-bold和focus:(font-bold,underline)不能压缩，因为它们不再相同。情节扭曲:压缩后，文件实际上更大，而不是更小！

底线：

因此，这里的优点是，尽管在编写

时，分组语法看起来更少，但实际上它在生产中同时创建了一个更大的CSS文件和一个更大的HTML文件，使得它成为了一个非常黑白的性能反模式。但是写起来更好，而且性能成本也不是很大，所以我们仍然有机会进一步开发它，仅仅是为了开发人员的经验。但是，无可否认，对于鼓励任何不利于性能的事情，都是犹豫不决的。