使用 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',
}