React中如何在TailwindCSS里为子元素批量添加多类样式？

当然可以实现你要的效果，不用重复编写[&>button]:前缀。你之前用逗号分隔类的写法Tailwind不支持，换成括号分组就能解决问题。

修改后的代码如下：

<div className="[&>button]:(text-white px-6) flex gap-2">
  <button>Right</button>
  <button>Left</button>
  <button>Circle</button>
  <button>Square</button>
  <button>Stop</button>
</div>

原理说明 #

Tailwind支持将同一变体下的多个类用括号包裹，这样整个括号里的类都会自动继承前面的变体前缀[&>button]:，既实现了批量给子button添加text-white和px-6样式的需求，又能让父div保留flex gap-2的布局样式，代码也更简洁。

内容的提问来源于stack exchange，提问作者ok i