React中Tailwind CSS文本装饰类不生效问题求助

问题排查与修复步骤： #

• React属性错误：JSX元素必须用className替代class，原代码里<li>使用class属性，导致Tailwind类根本没绑定到DOM元素上。
• Tailwind类名错误：
  • 文本装饰颜色类应为decoration-black，而非text-decoration-black；
  • 移除删除线不能用hover:no-underline（该类仅用于移除下划线），正确类是hover:decoration-none，它会清除所有文本装饰（包含删除线）。

修正后的代码： #

<td className="px-4 py-3 border-black border text-xl">
  <ul>
    {job.responsibilities.map((responsibility, resIndex) => (
      <li
        key={resIndex}
        className="line-through decoration-8 decoration-black hover:decoration-none"
      >
        {responsibility}
      </li>
    ))}
  </ul>
</td>

额外说明： #

如果修正后仍有问题，可检查tailwind.config.js，确保未禁用textDecoration相关核心插件。另外执行项目构建命令（如npm run build）重新生成CSS文件，确保新类被打包生效。

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