我试图遵循官方Tailwind CSS文档，在React（Vite）环境中构建示例。
在差异化对等点示例中，无论选中哪个单选按钮，我都无法显示隐藏的文本。
我怀疑这是因为radio输入是在运行时生成的，所以Tailwind不能在编译时生成所需的CSS。你能证实这一点，并最终提出一个替代方案吗？
下面是我的React组件：

export default function RadioGroup({ formId, legend, name, fields }) {
    return (<fieldset className="mx-auto max-w-md bg-white p-8 text-sm shadow">
        <div className="mb-6 border-b border-slate-200 pb-2 text-base font-semibold">
            {legend}
        </div>
        {fields.map((field) => (<>
            <input 
                key={`field-${field.id}-input`}
                id={`${formId}-${field.id}`}
                className={`peer/${field.id} mr-2 mb-0.5 border-slate-300 text-sky-400 focus:ring-sky-300"`}
                type="radio"
                name={name}
            />
            <label 
                key={`field-${field.id}-label`}
                htmlFor={`${formId}-${field.id}`}
                className={`peer-checked/${field.id}:text-sky-500 font-medium`}
            >
                {field.label}
            </label>
        </>))}
        {fields.map(field => (<div 
            key={`description-${field.id}`} 
            className={`peer-checked/${field.id}:block hidden mt-4 text-gray-500`}
        >
            {field.description}
        </div>))}
    </fieldset>)
}

下面是生成的HTML：

<fieldset class="mx-auto max-w-md bg-white p-8 text-sm shadow">
  <div class="mb-6 border-b border-slate-200 pb-2 text-base font-semibold">Published status</div
  
  <input id=":rb:-draft" class="peer/draft mr-2 mb-0.5 border-slate-300 text-sky-400 focus:ring-sky-300&quot;" type="radio" name="status">
  <label for=":rb:-draft" class="peer-checked/draft:text-sky-500 font-medium">Draft</label>
  
  <input id=":rb:-published" class="peer/published mr-2 mb-0.5 border-slate-300 text-sky-400 focus:ring-sky-300&quot;" type="radio" name="status">
  <label for=":rb:-published" class="peer-checked/published:text-sky-500 font-medium">Published</label>
  
  <div class="peer-checked/draft:block hidden mt-4 text-gray-500">Draft are only visible to administrators.</div>
  <div class="peer-checked/published:block hidden mt-4 text-gray-500">Your post will be publicly visible on your site.</div>
</fieldset>

我已经尝试了受控和非受控组件，都无济于事。
非常感谢你的时间。
编辑：阅读文档（正如@kca在接受的答案中指出的那样），我能够提出一个解决方案。谢天谢地，Tailwind可以在我的JS（X）文件中的任何地方找到类名，所以我能够构建一个有限的类名列表，并根据字段列表中的索引使用这些名称：

const peers = [
    'peer/radio-0',
    'peer/radio-1',
    'peer/radio-2',
    'peer/radio-3',
    'peer/radio-4',
    'peer/radio-5',
    'peer/radio-6',
    'peer/radio-7',
    'peer/radio-8',
    'peer/radio-9',
]

const peersChecked = [
    { text: 'peer-checked/radio-0:text-sky-500', block: 'peer-checked/radio-0:block' },
    { text: 'peer-checked/radio-1:text-sky-500', block: 'peer-checked/radio-1:block' },
    { text: 'peer-checked/radio-2:text-sky-500', block: 'peer-checked/radio-2:block' },
    { text: 'peer-checked/radio-3:text-sky-500', block: 'peer-checked/radio-3:block' },
    { text: 'peer-checked/radio-4:text-sky-500', block: 'peer-checked/radio-4:block' },
    { text: 'peer-checked/radio-5:text-sky-500', block: 'peer-checked/radio-5:block' },
    { text: 'peer-checked/radio-6:text-sky-500', block: 'peer-checked/radio-6:block' },
    { text: 'peer-checked/radio-7:text-sky-500', block: 'peer-checked/radio-7:block' },
    { text: 'peer-checked/radio-8:text-sky-500', block: 'peer-checked/radio-8:block' },
    { text: 'peer-checked/radio-9:text-sky-500', block: 'peer-checked/radio-9:block' },
]

示例用法：

{fields.map((field, index) => (<div key={`description-${field.id}`} className={`${peersChecked[index].block} hidden mt-4 text-gray-500`}>{field.description}</div>))}

虽然这是可行的，但这使我创建了任意数量的类，这些类可能比当前情况下所需的更多或更少。因此，虽然我认为这个问题已经解决，但我仍然愿意接受更好的解决方案，甚至是一个干净的解决方案！
非常感谢！