Map生成Tailwind同级类时Next.js单选按钮无响应问题求助

一、动态生成Tailwind Peer类的可行性 #

可以通过生成式方法分配Tailwind类，但必须让Tailwind的JIT编译器提前识别到所有可能的类名。

你的问题核心在于：Tailwind JIT是在构建阶段扫描代码中的完整类名来生成CSS的，动态拼接的peer/${item.id}、peer-checked/${item.id}这类类名，编译器无法在构建时解析出具体值，因此不会生成对应的CSS规则——这就是为什么静态HTML能正常工作（类名写死，编译器可识别），但Next.js编译后失效的原因。

解决方法有两种：

• 方法1：在tailwind.config.js中添加安全列表（safelist）
  把所有可能用到的peer和peer-checked类提前声明，强制编译器生成对应CSS：

  /** @type {import('tailwindcss').Config} */
  module.exports = {
    content: ["./app/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"],
    safelist: [
      "peer/wlk",
      "peer-checked/wlk:block",
      "peer/sit",
      "peer-checked/sit:block",
      "peer/wlkClose",
      "peer-checked/wlkClose:hidden",
      "peer/sitClose",
      "peer-checked/sitClose:hidden",
    ],
    theme: { extend: {} },
    plugins: [],
  };
  

  若jobs数组是动态的，可通过正则匹配模式批量声明：

  safelist: [
    {
      pattern: /peer-?checked?\/(wlk|sit|wlkClose|sitClose)/,
    },
  ]
  

• 方法2：用静态类名映射替代动态拼接
  给每个job定义固定的类名标识，确保编译器能扫描到完整类名：

  {jobs.map((item, index) => {
    const peerKey = `job-${index}`;
    return (
      <div key={item.id}>
        <input className={`peer/${peerKey}`} type="radio" name={peerKey} />
        <div className={`hidden peer-checked/${peerKey}:block`}>
          {item.content}
        </div>
      </div>
    )
  })}
  

二、代码逻辑缺陷修复 #

除了Tailwind类的问题，你的单选按钮逻辑也有漏洞：

• 两个单选按钮的name属性用了item.id（同一组），但内容仅绑定了peer-checked/${item.id}:block（对应「Learn More」按钮），点击「Close」按钮时无对应隐藏规则，导致内容无法收起。

修复逻辑：让内容同时响应两个单选框的选中状态，默认选中「Close」按钮确保初始隐藏：

<input 
  id={`${item.id}Close`} 
  className={`peer/${item.id}Close`} 
  type="radio" 
  name={item.id} 
  defaultChecked 
/>
<div className={`hidden peer-checked/${item.id}:block peer-checked/${item.id}Close:hidden`}>
  <p>{item.content}</p>
</div>

三、更优的无JS展开收起方案 #

用浏览器原生的<details>和<summary>标签替代单选按钮，这是语义化的原生组件，无需额外CSS技巧，代码更简洁稳定：

export default function page() {
  const jobs = [
    {
      name: "walker",
      id: "wlk",
      conditions: "20 an hour",
      content: "walk and walk"
    },
    {
      name: "sitter",
      id: "sit",
      conditions: "20 an hour",
      content: "sit and sit"
    },
  ]

  return (
    <section id="careerHome">
      <div className="container grid md:grid-cols-2">
        {jobs.map((item) => (
          <details 
            key={item.id}
            className="shadow-lg p-10 text-center capitalize flex-1 mt-6 rounded-md flex flex-col relative"
          >
            <summary className="cursor-pointer">
              <h3>{item.name}</h3>
              <b className="text-start block mt-2">Learn More</b>
            </summary>
            <div className="mt-4">
              <p className="absolute top-20 right-[10%]">{item.conditions}</p>
              <p className="mt-8">{item.content}</p>
              {/* 自定义收起按钮（可选，summary点击可自动收起） */}
              <b className="text-start block mt-4 cursor-pointer" onClick={(e) => {
                e.target.parentElement.parentElement.removeAttribute('open');
              }}>Close</b>
            </div>
          </details>
        ))}
      </div>
    </section>
  )
}

你可以用Tailwind完全自定义<details>和<summary>的样式，比如去掉默认箭头、添加展开动画等。

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