我正在尝试遵循官方的顺风CSS文档，在React (Vite)环境中构建示例。
在区分对等体的例子中，无论选中哪个单选按钮，我都无法显示隐藏文本。
我怀疑这是因为无线电输入是在运行时生成的，因此，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"" 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"" 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>))}
虽然这可以工作，但这使我创建了任意数量的类，这些类可能比当前情况下需要的多或少。所以，虽然我认为问题已经解决了，但我仍然愿意寻找更好的解决方案，甚至是一个干净的解决方案!
多谢!
您的假设是正确的，您不能在Tailwind中动态构建类名。
使用预定义的类名，如果它只是一组固定的替代，或者，如果所有元素都是非常特定的，则添加样式而不是类名。
另见"动态背景与地图和尾风">的答案。