如何在Tailwind的className中添加复选框选中时的特定样式

我目前在tailwind.css文件中为选中状态的复选框设置样式，但希望能直接在className内联实现，避免添加过多全局样式。当前组件实现为复选框选中时显示SVG替代默认样式，代码如下：

<input
    key={color}
    type="checkbox"
    className="peer hidden input:checked"
    name="checkbox-colors"
    checked={isChecked === color}
    value={color}
    onClick={(e) => {
      handleColorChange(e.currentTarget.value);
    }}
    readOnly
/>
<div className="h-full w-full flex justify-center items-center">
    <CheckIcon className="hidden" />
</div>

现有全局样式为：

input:checked + div svg {
  @apply block;
}

请问能否在input的className="peer hidden input:checked..."中实现该样式效果？

当然可以实现，直接利用Tailwind的peer关联特性就能替代全局样式，具体修改如下：

• 移除input类名里多余的input:checked，保留peer hidden即可
• 在CheckIcon的className中添加peer-checked:block，让它响应input（peer元素）的选中状态

修改后的完整代码：

<input
    key={color}
    type="checkbox"
    className="peer hidden"
    name="checkbox-colors"
    checked={isChecked === color}
    value={color}
    onClick={(e) => {
      handleColorChange(e.currentTarget.value);
    }}
    readOnly
/>
<div className="h-full w-full flex justify-center items-center">
    <CheckIcon className="hidden peer-checked:block" />
</div>

原理说明 #

Tailwind的peer类会标记当前元素为“关联元素”，后续的兄弟元素可以通过peer-*前缀的类关联它的状态。这里peer-checked:block表示：当带有peer类的input处于选中状态时，当前SVG元素的display属性设为block，完全替代了原来的全局CSS选择器逻辑。

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