使用 React 在 Tailwind 上使用任意值时出现问题
Ram*_*uis 17 javascript reactjs tailwind-css
我正在尝试制作一个反应组件来更改参数的宽度，但它不起作用，我不知道为什么。
function Bar() {
const p =80
const style = `bg-slate-500 h-8 w-[${p.toFixed(1)}%]`
console.log(style)
return (
<div className=' h-8 w-full'>
<div className={`bg-slate-500 h-8 w-[${p}%]`}>
</div>
</div>
)
}
export default Bar
通过这段代码，我得到了一个全尺寸的条，但如果我使用 80.0 的严格字符串，它就可以正常工作
wiz*_*003 25
其他答案都是错误的。Tailwind V3 包含 JIT，您不再需要将模式设置为 jit。即使在 Tailwind V2 中，发布的代码也无法工作。
按照文档，您必须避免字符串插值并使用完整的类名。
这是错误的：
<div class="text-{{ error ? 'red' : 'green' }}-600"></div>
相反，使用完整的类名：
<div class="{{ error ? 'text-red-600' : 'text-green-600' }}"></div>
使用内联样式怎么样？
您可能想使用内联样式，但请记住，内容安全策略越来越受到严格审查，以禁止不安全的内联。任何内联style或script理论上都可能注入非预期的内容。此外，Tailwind 的重点是在构建时生成 CSS，因此您需要解决它，并且在本例中甚至可能不使用它。
- 为什么第一种方法是错误的？ (7认同)
- @sir https://v2.tailwindcss.com/docs/just-in-time-mode#centric-value-support ，也适用于 V3，除非他们最近更改了它 (2认同)
- 截至今天，您仍然需要在 tailwind.config 中手动启用“jit”。OP 做错的事情是使用字符串连接来构建类，如“动态值”下的文档中所述。https://v2.tailwindcss.com/docs/just-in-time-mode#overview (2认同)
小智 18
我和你有完全相同的问题。
const p =80
<div className={`bg-slate-500 h-8 w-[${p}%]`}>
上面的代码在服务器端动态设置“w-[${p}%]”为“w-80%”。然而，Tailwind 无法处理动态计算的任意值。
Tailwind官方文档说；
为了解决这个问题，我们需要使用style如下所示的属性，在该属性中我们无法再使用 TailwindCSS；
<div
style={{width: `${p}%`}}
className={`bg-slate-500 h-8`}>
我希望它对你有很大帮助。