在tailwind中使用map生成兄弟类

Question

我正在使用 tailwind、react 和 nextjs 创建一个网站。我正在尝试利用检查单选按钮技巧让网站在没有 JavaScript 的情况下显示不同的内容。我想让数据结构易于管理，所以我想到使用对象数组，例如 [{name: string, content: string}, ... ]。这是我关注的顺风文档的一部分：区分同行

我以为我可以更换

class="peer/draft"

与

className={`peer/${item.name}`}`

假设它被包装在 array.map((item) => { ... }) 内。

这是我关注的顺风文档的一部分：区分同行

代码生成了正确的东西，因为：

如果我只是用nextjs编译出来的纯html代码发送到客户端浏览器，兄弟俩就可以安心玩了。

但是：

如果我只是让 nextjs 编译它并将其传递到客户端浏览器，那么当按下单选按钮时，客户端浏览器读取的相同 html 代码将不会做出反应！

这是我的代码，包括数据示例：

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) => {
                    return (
                        <div
                            key={item.id}
                            className="shadow-lg p-10 text-center capitalize flex-1 mt-6 rounded-md flex flex-col relative"
                        >
                            <h3>
                                {item.name}
                            </h3>
                            <input id={item.id} className={`peer/${item.id}`} type="radio" name={item.id} />
                            <b className="text-start">Learn More</b>
                            <div className="h-4"></div>
                            <input id={`${item.id}Close`} className={`peer/${item.id}Close`} type="radio" name={item.id} />
                            <b className="text-start">Close</b>
                            <div className={`hidden peer-checked/${item.id}:block absolute top-20 right-[10%]`}>
                                <p>{item.conditions}</p>
                            </div>
                            <div className={`hidden peer-checked/${item.id}:block`}>
                                <p>{item.content}</p>
                            </div>
                        </div>
                    )
                })}
            </div>
        </section>
    )
}

每个区块应该有两个按钮，一个用于打开，一个用于关闭。

是否可以使用生成函数来分配顺风类别？

我确信这不是最好的做事方式，所以如果不推荐这样做，请告诉我更多！

Answer 1

根据文档：

Tailwind 如何提取类名的最重要含义是，它只会查找源文件中以完整不间断的字符串形式存在的类。

如果您使用字符串插值或将部分类名连接在一起，Tailwind 将找不到它们，因此不会生成相应的 CSS：

不要动态构造类名

<div class="text-{{ error ? 'red' : 'green' }}-600"></div>

在上面的示例中，字符串

text-red-600

和

text-green-600

不存在，因此 Tailwind 不会生成这些类。 相反，请确保您使用的任何类名完整存在：

始终使用完整的类名

<div class="{{ error ? 'text-red-600' : 'text-green-600' }}"></div>

由于

peer

元素及其“依赖项”似乎均由父

<div>

元素分隔，并且您实际上只使用一个

peer

（不使用

peer/${item.id}Close

），因此您不需要使用标记的同行：

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) => {
          return (
            <div
              key={item.id}
              className="shadow-lg p-10 text-center capitalize flex-1 mt-6 rounded-md flex flex-col relative"
            >
              <h3>{item.name}</h3>
              <input
                id={item.id}
                className="peer"
                type="radio"
                name={item.id}
              />
              <b className="text-start">Learn More</b>
              <div className="h-4"></div>
              <input id={`${item.id}Close`} type="radio" name={item.id} />
              <b className="text-start">Close</b>
              <div className="hidden peer-checked:block absolute top-20 right-[10%]">
                <p>{item.conditions}</p>
              </div>
              <div className="hidden peer-checked:block">
                <p>{item.content}</p>
              </div>
            </div>
          );
        })}
      </div>
    </section>
  );
}

ReactDOM.createRoot(document.getElementById('app')).render(<Page/>);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.3.1/umd/react.production.min.js" integrity="sha512-QVs8Lo43F9lSuBykadDb0oSXDL/BbZ588urWVCRwSIoewQv/Ewg1f84mK3U790bZ0FfhFa1YSQUmIhG+pIRKeg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.3.1/umd/react-dom.production.min.js" integrity="sha512-6a1107rTlA4gYpgHAqbwLAtxmWipBdJFcq8y5S/aTge3Bp+VAklABm2LO+Kg51vOWR9JMZq1Ovjl5tpluNpTeQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.tailwindcss.com/3.4.3"></script>

<div id="app"></div>