Tailwind CSS中是否支持对pseudo selectors进行分组？

Tailwind默认不支持你想要的before:[w-5 h-5]这种直接分组Tailwind类的写法，但可以通过以下几种方式达到类似的简化效果：

• 自定义组合工具类（纯CSS方式）
  直接在项目的自定义CSS文件中创建合并后的类：

  .before-size-5::before {
    width: 1.25rem;
    height: 1.25rem;
  }
  

  之后在HTML中直接使用：

  <div class="before-size-5">hello world</div>
  

• 使用Tailwind的@apply指令（推荐）
  借助Tailwind的@layer和@apply，在CSS中组合已有Tailwind类，让它融入Tailwind的编译流程：

  @layer utilities {
    .before-w-h-5 {
      @apply before:w-5 before:h-5;
    }
  }
  

  然后在HTML中使用这个自定义类：

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

需要注意的是：Tailwind语法里的before:[...]是用于写原生CSS属性的内联写法（比如before:[width:1.25rem]），括号内不能直接放置Tailwind的类名，因为它识别的是CSS属性而非Tailwind类，所以你设想的before:[w-5 h-5]写法无法生效。

内容的提问来源于stack exchange，提问作者Artur Müller Romanov