React中动态数据在Tailwind CSS不生效，复选框样式控制问题求解

你的代码存在几个关键问题导致功能失效：

• 状态类型不匹配：checkValue初始值是空字符串，但checkbox的checked是布尔值，最终会导致className里混入"true"/"false"这类无效类名。
• Tailwind不支持true:line-through这种自定义条件语法，这种写法不会被框架解析。

直接修改以下两处即可解决：

1. 修正状态初始值，统一用布尔类型作为状态默认值：

const [checkValue, setCheckValue] = useState(false);

2. 根据checkValue的布尔值动态添加line-through类，替换原来的错误写法：

<label 
className={`inline-block pl-[0.15rem] hover:cursor-pointer ${checkValue ? 'line-through' : ''}`}>
  {item}
</label>

完整修改后的代码：

import { useState } from "react";
export default function ShopList({ item, index }) {
  const [checkValue, setCheckValue] = useState(false);
  return (
    <div>
      <div className="mb-[0.125rem] block min-h-[1.5rem] pl-[1.5rem]" data-index={index}>
        <input type="checkbox" onChange={(e) => setCheckValue(e.target.checked)} />
        <label 
        className={`inline-block pl-[0.15rem] hover:cursor-pointer ${checkValue ? 'line-through' : ''}`}>
          {item}
        </label>
      </div>
    </div>
  );
}

逻辑很清晰：当checkbox被勾选时，checkValue变为true，模板字符串会自动把line-through类添加到label上，Tailwind就能正确识别并应用删除线样式；未勾选时则不添加该类。

内容的提问来源于stack exchange，提问作者Enes Şirin