如何结合peer-checked伪类实现图标切换及自定义类应用？

为什么你的尝试无效？ #

Tailwind的状态变体（比如peer-checked、hover）只能作用于Tailwind自带的工具类，没法直接用来修饰第三方类（像Font Awesome的fa-*类）或者你自己写的自定义CSS类。

比如你写的hover:my-red-background，Tailwind不会自动把自定义类和hover变体绑定，必须通过特定配置或CSS写法才能生效。

自定义类结合Tailwind变体的正确写法 #

想要让自定义类支持Tailwind的状态变体，有两种靠谱的方式：

1. 用CSS嵌套选择器绑定变体 #

直接在自定义CSS里写出变体对应的选择器，配合Tailwind的peer逻辑：

<style>
  .my-red-background {
    background-color: red;
  }

  /* 实现hover变体的自定义类 */
  .hover\:my-red-background:hover {
    @apply my-red-background;
  }

  /* 实现peer-checked变体的自定义类 */
  .peer:checked ~ .peer-checked\:my-red-background {
    @apply my-red-background;
  }
</style>

<!-- 测试hover效果 -->
<div class="bg-blue-500 hover:my-red-background">hover me</div>

<!-- 测试peer-checked效果 -->
<label>
  <input type="checkbox" class="hidden peer" />
  <div class="bg-blue-500 peer-checked:my-red-background">Check the box</div>
</label>

2. 在Tailwind配置里注册自定义工具类 #

把自定义样式注册成Tailwind的内置工具类，同时开启对应变体：

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      backgroundColor: {
        'custom-red': 'red', // 注册自定义背景色
      },
    },
  },
  variants: {
    extend: {
      backgroundColor: ['hover', 'peer-checked'], // 给背景色开启hover和peer-checked变体
    },
  },
}

之后直接用Tailwind的写法就能生效：

<div class="bg-blue-500 hover:bg-custom-red">hover me</div>

<label>
  <input type="checkbox" class="hidden peer" />
  <div class="bg-blue-500 peer-checked:bg-custom-red">Check the box</div>
</label>

更优雅的Font Awesome图标切换方案 #

你原来的双元素切换写法确实有点冗余，这里给你三种更简洁的实现：

方案1：单个容器切换图标样式 #

用CSS控制两个图标的显示/隐藏，只用一个外层容器，结构更紧凑：

<style>
  .toggle-icon .fa-solid {
    display: none;
  }
  .peer:checked ~ .toggle-icon .fa-regular {
    display: none;
  }
  .peer:checked ~ .toggle-icon .fa-solid {
    display: inline-block;
  }
</style>

<label class="flex items-center gap-2">
  <input type="checkbox" class="hidden peer" />
  <span class="toggle-icon">
    <i class="fa-regular fa-circle-check"></i>
    <i class="fa-solid fa-circle-check"></i>
  </span>
  <span>Label</span>
</label>

方案2：利用Font Awesome的CSS变量 #

Font Awesome支持通过CSS变量切换图标样式，不用写多个图标元素：

<style>
  .icon-toggle {
    --fa-style: regular;
  }
  .peer:checked ~ .icon-toggle {
    --fa-style: solid;
    font-weight: 900; /* solid样式需要font-weight:900 */
  }
</style>

<label class="flex items-center gap-2">
  <input type="checkbox" class="hidden peer" />
  <i class="icon-toggle fa-circle-check"></i>
  <span>Label</span>
</label>

方案3：精简版双元素写法 #

如果不想写自定义CSS，也可以简化原来的结构，用inline-block替代div，减少标签层级：

<label class="flex items-center gap-2">
  <input type="checkbox" class="hidden peer" />
  <i class="fa-solid fa-circle-check peer-checked:hidden"></i>
  <i class="fa-regular fa-circle-check hidden peer-checked:inline-block"></i>
  <span>Label</span>
</label>

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