我尝试在className中添加一个变量，需要附加一个百分比才能使其生效。例如，下面的代码可以生效：
className="scale-x-[35%]"但下面的代码却不会：
className={`scale-x-[${variableNumber}%]`}将百分比字符串追加到变量中的正确方法是什么？
编辑：完整代码
export default function proposalDetail() {
const [percentage1, setPercentage1] = useState(10);
const [percentage2, setPercentage2] = useState(35);
return (
<div className="relative p-4 my-4 overflow-hidden border border-gray-200 rounded-lg hover:border-indigo-500">
<div className={`scale-x-${percentage1}% absolute inset-0 w-full origin-top-left bg-indigo-500 bg-opacity-50`}></div>
<div className="relative text-black z-100 dark:text-white">
<div className="font-medium">0% burn, 2.5% revenue</div>
<div className="text-sm">23 voters</div>
<div className="text-sm">295.7513474746361 QNTFI ({percentage1}%)</div>
</div>
</div>
)
2条答案
按热度按时间dwbf0jvd1#
className={scale-x-${percentage1}% ...}试图使用动态Tailwind实用程序类。这将不起作用，因为Tailwind通过分析您的代码创建其编译的CSS文件，并且只包含完全格式的（非动态）实用程序类。有关说明，请参阅：https://tailwindcss.com/docs/content-configuration#dynamic-class-names如果可能的
percentage1和percentage2值的范围是从0到100，最好将该值除以100，并使用style属性而不是Tailwind属性来转换CSS。例如：uplii1fm2#
根据docs，
10不是scale类的预定义值。要添加一次性自定义值，可以执行以下操作：0为0%，而1为100%。