我有一個react組件，代碼如下:

function DoubleCell(props: Props) {
    return (
        <div className="DoubleCell flex w-2/3 mx-auto">
            <div className={`formula_dbl ${props.formula_width ? `w-${props.formula_width}` : "w-1/2"}`}>
                {props.formula}
            </div>

            <div className={`desc_dbl ${props.description_width? `w-${props.description_width}`:"w-1/2"}`}>
                {props.description}
            </div>
        </div>
    );
}

它基本上是一個div，占屏幕寬度的三分之二，內部有兩個嵌套的div。當它們作為一個組件被調用時，它們的內容在別處被定義。現在一件有趣的事情是，我希望嵌套的div可以隨意定義它們的寬度...

這是我的道具界面。

interface Props {
    formula: String;
    description: String;
    formula_width?: String;
    description_width?: String;
}

所有這些代碼都存在于components/FormulaCell.tsx中

下面是我開始調用組件的my _app.tsx文件:

import '@/styles/globals.css'
import DoubleCell from "./components/FormulaCell"

const formulae = [
    ["f1","f1-uses","5/6", "1/6"],
    ["f2","f2-uses","4/6", "2/6"],
    ["f3","f3-uses","3/6", "3/6"],
    ["f4","f4-uses","2/6", "4/6"],
    ["f5","f5-uses","1/6", "5/6"],
]

function App(){
    return (
        <>
            {formulae.map((formula, index) => (
                <DoubleCell
                key={index}
                formula={formula[0]}
                description={formula[1]}
                formula_width={formula[2]}
                description_width={formula[3]}/>
        ))}
        </>
    )
}

export default App;

在上面的代碼中，我定義了作為& ltDoubleCell/>成分...

["f1","f1-uses","5/6", "1/6"],
["f2","f2-uses","4/6", "2/6"],
["f3","f3-uses","3/6", "3/6"],
["f4","f4-uses","2/6", "4/6"],
["f5","f5-uses","1/6", "5/6"]

內容(例如:f1和f1-uses)有效，但是順風寬度類無效。

我試圖尋找這個問題的解決方案，并在這里找到了這個帖子

他們說，由于沒有使用這些樣式，它們被tailwind刪除了，他們創建了一個不可見的div，其中包含了供tailwind加載它們所需的類。問題是我的項目將很快使用任意值，我可能無法將這些值放入一個不可見的div中(因為它實際上可以是任何值)。

來自tailwindcss作者的提示:

有用的技巧，如果你需要使用內聯樣式，因為一個值來自數據庫或其他什么，但也需要在懸停或類似情況下改變這些樣式

使用這些值通過內聯樣式設置CSS變量，然后使用任意值讀取變量

<div
  style={{
    '--custom-width': width,
  }}
  className="w-[var(--custom-width)]"
>