在 TailwindCSS 和 UnoCSS 中，如何处理重复类的合并问题是否值得？

如何在tailwindcss 和unocss 中处理重复类的合并问题

在使用tailwindcss 和unocss 时，开发者可能会遇到一个常见问题，即如何合并属性值完全相同的重复类名，从而减少生成的css 文件体积。举个例子，假设我们有h-10、before:h-10、after:h-10、focus:h-10 和hover:h-10 这几个类，它们的属性值都是height: 2.5rem。然而，打包后的css 文件中，这些类可能会被分别生成，如下所示：

.h-10, .hover:h-10:hover {   height: 2.5rem; } .focus:h-10:focus {   height: 2.5rem; } .before:h-10:before {   height: 2.5rem; } .after:h-10:after {   height: 2.5rem; }

随着项目的发展，css 变得越来越复杂，这种重复的属性会导致文件体积显着增加。理想情况下，我们希望能够将这些重复的类合并成一个统一的样式规则，如下所示：

.h-10, .hover:h-10:hover, .focus:h-10:focus, .before:h-10:before, .after:h-10:after {   height: 2.5rem; }

那么，如何实现这种合并呢？实际上，对于这个问题，我们并不需要过度考虑这种微小的优化。几十个字节的差距相对于网页中的视频和图片动辄几十上百kb 的体积来说，实在是微不足道。因此，尽管从理论上看合并重复类是一个优化点，但在实际应用中，这种优化带来的收益非常有限，不值得我们花费时间和精力去实现。