问题

Here is the translation of the code and information you provided:

我有一个React组件，其中包含以下代码：
```typescript
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>
    );
}

这基本上是一个占据屏幕宽度的2/3的div，内部有2个嵌套的div。它们的内容在调用组件时在其他地方定义。现在有一个有趣的问题，我希望这两个嵌套的div可以选择性地定义宽度...

这是我的Props接口。

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

所有这些代码都存在于components/FormulaCell.tsx中。

这是我的_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;

在上面的代码中，我定义了一个作为<DoubleCell/>组件参数使用的值数组...

["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的宽度类不起作用。

我尝试寻找这个问题的解决方案，并找到了这篇帖子这里。

他们说，由于未使用，Tailwind删除了样式，并且他们创建了一个带有所需类的不可见div，以便Tailwind加载它们。问题是，我的项目很快将使用任意值，我可能无法将它们放在不可见的div中（因为它可以是任何东西）。

I've provided the translation of your code and information. If you have any specific questions or need further assistance, please let me know.
<details>
<summary>英文:</summary>
I have a react component with the following code:
```typescript
function DoubleCell(props: Props) {
return (
&lt;div className=&quot;DoubleCell flex w-2/3 mx-auto&quot;&gt;
&lt;div className={`formula_dbl ${props.formula_width ? `w-${props.formula_width}` : &quot;w-1/2&quot;}`}&gt;
{props.formula}
&lt;/div&gt;
&lt;div className={`desc_dbl ${props.description_width? `w-${props.description_width}`:&quot;w-1/2&quot;}`}&gt;
{props.description}
&lt;/div&gt;
&lt;/div&gt;
);
}

It is basically a div taking 2 thirds of a screen width with 2 nested divs inside. Their contents are defined elsewhere when they are called as a component. Now one interesting thing is that I want the nested divs to optionally have their widths defined...

Here is my Props interface.

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

All of this is code is present in components/FormulaCell.tsx

Here is my _app.tsx file where I start calling the component:

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;

In the above code where I defined the array of values to be used as parameters for the <DoubleCell/> component...

["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"]

The content (eg: f1 and f1-uses) works, but the tailwind width classes don't work.

I tried look for a solution to this problem and found this post here

Where they said that styles were being removed by tailwind as they were not used, and that they had created an invisible div with the required classes for tailwind to load them. The problem is that my project will soon use Arbitrary values, which I many not be able to put in an invisible div (as it can be literally anything).

答案1

得分: 1

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

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