Tailwind CSS： Select 单选按钮时不应用同行判断的边框

我有这个输入，输入"Radio"，当它被选中时，我想要应用一个更大更暗的边框.

当我单击时，类将在我判断时应用，但按钮没有可见的更改.

知道为什么吗？

这是一张sandbox美元的钞票

以下是我的代码:

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

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

  const checkedClassNames =
    'peer-checked/yes:border-transparent peer-checked/yes:shadow-lg peer-checked/yes:border-2 peer-checked/yes:border-solid peer-checked/yes:border-neutral-600 peer-checked/yes:text-neutral-700';

  return (
    <div className="w-20">
      <input
        type="radio"
        id="id"
        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 ${
          checked ? checkedClassNames : null
        }`}
      >
        Label
      </label>
    </div>
  );
};

export default RadioButton;