使用 React 在 Tailwind 上出现任意值的问题

Question

我正在尝试制作一个反应组件来改变参数的宽度，但它不起作用，我不知道为什么。

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 的严格字符串，它可以正常工作

Answer 1

其他答案都是错误的。 在 Tailwind V3 中包含 JIT，您不再需要将模式设置为 jit。 即使在 Tailwind V2 中，发布的代码也不起作用。

@Dennis Martinez 在评论中提到的实际解决方案是将真正动态的 styles 移出类并inline styles 。

这是错误的：

const padding = 80;
<div className=`p-[${padding}%]`>
  Some Content
</div>

而是使用inline styling ：

const padding = 80;
<div style={{padding: `${padding}%`}}>
  Some Content
</div>

Answer 2

包含模式：tailwind 配置文件中的“jit”

Answer 3

在tailwind.config.js添加mode: 'jit' 。

我建议https://v2.tailwindcss.com/docs/just-in-time-mode了解更多信息。

例如：

module.exports = {
   //other options
   mode: 'jit',
}