如何用Tailwind实现复选框选中时切换图标颜色？

你当前的问题出在误用了Tailwind的group和peer选择器组合，group-[peer-checked]的写法逻辑不符合Tailwind的选择器规则，导致样式不生效。

正确的实现方式 #

不需要借助group类，直接利用Tailwind的peer系列选择器，就能实现当同级复选框选中时，修改label内图标的颜色：

修改后的代码如下：

<input type="checkbox" id="darkmode-toggle" class="peer invisible h-0 w-0" />
<label for="darkmode-toggle" class="btn-toggle">
    <svg class="icon absolute">
        <use href="../../assets/icons/spirit.svg#sun" />
    </svg>
    <svg class="icon absolute peer-checked:fill-secondary-dark-300">
        <use href="../../assets/icons/spirit.svg#moon" />
    </svg>
</label>

原理说明 #

• 给input添加peer类后，它的同级元素（这里是label）内部的子元素，可以通过peer-checked前缀来关联input的选中状态。
• 当input被选中时，peer-checked:fill-secondary-dark-300会自动应用到对应的svg元素上，修改其填充色。

如果需要同时调整太阳图标的样式（比如选中时隐藏或变色），只需给太阳图标添加对应的peer-checked:前缀样式即可，例如：

<svg class="icon absolute peer-checked:hidden">
    <use href="../../assets/icons/spirit.svg#sun" />
</svg>

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