Tailwind CSS问题：单选按钮选中时peer-checked边框样式不生效

核心问题 #

1. 单选框状态不同步：你的<input type="radio">没有绑定checked属性，导致原生单选框的选中状态和React的checked state不一致。Tailwind的peer-checked伪类是基于元素的原生状态生效的，不是React的state，所以即使你切换了state，原生单选框没真正选中，peer-checked样式就不会触发。
2. 错误使用Tailwind peer类：你把带peer-checked/yes:前缀的类当成普通类，通过state条件添加到label上——但这类前缀是Tailwind的关联选择器标记，不需要手动控制，只要关联的peer元素（这里是input）处于checked状态，Tailwind会自动给label应用这些带前缀的样式。

修复步骤 #

1. 给input绑定checked={checked}，让原生状态和React state同步；
2. 重构label的样式类：把原本checkedClassNames里的样式改成带peer-checked/yes:前缀的形式，直接写在label的className里，不需要条件判断；
3. 移除基于state的类名条件判断，让Tailwind的peer机制自动处理样式切换。

修改后的代码 #

import React from "react";
import "./styles.css";
import "./styles/tailwind-pre-build.css";
import { useState } from 'react';

const RadioButton = () => {
  const [checked, setChecked] = useState(false);

  return (
    <div className="w-20">
      <input
        type="radio"
        id="id"
        checked={checked}
        onChange={() => setChecked(!checked)}
        className="peer/yes sr-only"
      />
      <label
        htmlFor="id"
        className={`flex justify-center items-center cursor-pointer rounded-lg text-sm border border-solid border-gray-300 px-4 h-10 text-neutral-500 focus:outline-none 
          peer-checked/yes:border-neutral-600 peer-checked/yes:border-2 
          peer-checked/yes:text-neutral-700`}
      >
        Label
      </label>
    </div>
  );
};

export default RadioButton;

额外说明 #

• 移除了peer-checked/yes:border-transparent和peer-checked/yes:shadow-lg，因为透明边框会覆盖你设置的深色边框，导致视觉上看不到变化；如果需要阴影效果，可以保留，但要注意边框样式的层级关系。
• 现在点击label或单选框时，原生单选框的checked状态会和React state同步，Tailwind的peer-checked/yes:样式会自动触发，label的边框和文字颜色会按预期变化。

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