React+TailwindCSS中row-span-full失效，如何让dt占满网格所有行

当网格容器的行数为自动生成（未显式设置grid-rows-*）时，Tailwind的row-span-full类无法生效——它依赖预定义的行数才能正常工作。要让<dt>占据网格的所有行，你可以直接使用CSS原生的grid-row: 1 / -1规则，对应Tailwind的自定义网格行类。

解决方案1：直接使用Tailwind自定义网格行类 #

修改<dt>的className，替换row-span-full为grid-row-[1/-1]：

Object.keys(data).map((category, idx) => (
  <dl key={category} className="grid grid-cols-[140px_repeat(6,_1fr)] p-4 gap-y-2">
    <dt className="grid-row-[1/-1]">{category}</dt>
    {data[category].map((item, i) => (
      <dd className="text-sm" key={i}>
        {item.name}
      </dd>
    ))}
  </dl>
));

grid-row-[1/-1]会强制<dt>从网格的第一行起始线延伸到最后一行的结束线，无论网格实际生成多少行，完美适配动态内容的行数变化，不会出现内容不足时的空白问题。

解决方案2：自定义Tailwind工具类（可选） #

如果你希望用更贴合Tailwind风格的类名，可以在tailwind.config.js中扩展gridRow工具类：

module.exports = {
  theme: {
    extend: {
      gridRow: {
        'full': '1 / -1',
      },
    },
  },
};

之后就可以在<dt>上使用grid-row-full类：

<dt className="grid-row-full">{category}</dt>

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