如何在Tailwind工具类的className中为变量拼接百分比字符串？

问题出在类名拼接格式上，Tailwind的自定义数值工具类要求必须把动态值包裹在方括号[]内，才能被JIT引擎正确识别。

你当前的写法会生成类似scale-x-10%的类名，但Tailwind并不识别这种格式——正确的自定义缩放类名结构是scale-x-[10%]。

正确的拼接方式 #

把百分比变量完整放进方括号里：

className={`scale-x-[${percentage1}%] absolute inset-0 w-full origin-top-left bg-indigo-500 bg-opacity-50`}

验证效果 #

这样生成的类名和你静态写的scale-x-[35%]结构完全一致，Tailwind会正常生成对应的CSS规则。

额外注意点 #

• 确保percentage1是有效的数字（或可转换为数字的字符串），避免非数值内容导致类名无效
• 若使用Tailwind v2版本，需手动在tailwind.config.js中开启JIT模式（v3及以上默认启用）

内容的提问来源于stack exchange，提问作者Furkan Öztürk