如何在TailwindCSS中将伪类、伪元素及媒体查询前缀合并为子类

完全可以实现这种简化写法，TailwindCSS v3.2及以上版本引入了**变体组（Variant Groups）**功能，专门解决重复书写前缀的问题，直接满足你的需求：

• 基础状态分组写法
  针对单个伪类/状态，只需要写一次前缀，括号内直接列出该状态下的所有样式类：

  <input class="disabled:(bg-slate-50 text-slate-500 border-slate-200 shadow-none)" />
  

  效果和重复写disabled:bg-slate-50 disabled:text-slate-500...完全一致，但写法更简洁。

• 复合状态分组写法
  支持多层复合前缀的嵌套分组，比如同时处理focus和invalid的复合状态：

  <input class="focus:invalid:(ring-2 ring-red-500 border-red-300)" />
  

  表示输入框同时处于聚焦且验证不通过状态时，应用括号内的样式。

• 媒体查询分组写法
  这个功能同样适用于媒体查询前缀，比如大屏设备的样式分组：

  <div class="md:(flex justify-between items-center py-4)" />
  

注意事项 #

• 必须使用TailwindCSS v3.2或更高版本，低版本不支持变体组功能；
• 括号内部的样式类不需要重复添加前缀，直接写核心类名即可；
• 可以混合普通样式类和分组样式类，灵活搭配使用：

  <input class="border rounded-md px-3 py-2 disabled:(bg-slate-50 text-slate-500)" />
  

内容的提问来源于stack exchange，提问作者Oleksandr Salivon