映射到组件时Tailwind宽度类因样式清除失效的问题

我写了一个React组件DoubleCell，用来渲染两个可自定义宽度的嵌套div，组件代码如下：

// components/FormulaCell.tsx
interface Props {
    formula: string;
    description: string;
    formula_width?: string;
    description_width?: string;
}

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>
    );
}

在_app.tsx中调用该组件时，传入的内容能正常显示，但通过props动态生成的Tailwind宽度类（比如w-5/6）完全不生效：

// _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;

之前尝试过添加隐藏div提前枚举所有需要的类，但项目后续要支持任意宽度值，这种方法不可行。

1. 改用Tailwind任意值语法传递宽度 #

Tailwind支持直接传入任意数值/比例作为宽度，不需要拼接类名。修改组件，让props直接接收宽度值，然后用w-[${value}]的语法：

// 修改Props接口
interface Props {
    formula: string;
    description: string;
    formula_width?: string; // 直接传入如"5/6"、"300px"、"75%"
    description_width?: string;
}

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>
    );
}

调用方式不变，传入的"5/6"这类值会被Tailwind的JIT编译器正确解析为对应的宽度。

2. 传递完整的Tailwind类名（更直接） #

修改组件的props，让外部直接传入完整的宽度类名，而不是类名后缀：

// 修改Props接口
interface Props {
    formula: string;
    description: string;
    formulaClass?: string;
    descriptionClass?: string;
}

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

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

调用时传入完整类名：

{formulae.map((formula, index) => (
    <DoubleCell
        key={index}
        formula={formula[0]}
        description={formula[1]}
        formulaClass={`w-${formula[2]}`}
        descriptionClass={`w-${formula[3]}`}
    />
))}

这种方式能确保Tailwind检测到完整的类名，不会被摇树优化掉。

3. 配置Tailwind安全列表（适合已知范围的动态类） #

如果你的宽度值有固定范围（比如1/6到5/6），可以在tailwind.config.js中配置安全列表，让Tailwind保留这些类：

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  safelist: [
    'w-1/6', 'w-2/6', 'w-3/6', 'w-4/6', 'w-5/6'
  ],
  // ...其他配置
}

但这种方法不适合完全任意的宽度值，仅适用于能提前枚举所有可能用到的类的场景。

内容的提问来源于stack exchange，提问作者Crypto