React中使用变量无法修改Tailwind样式问题求助

我在构建一个由1个父div和8个子div组成的骨架屏，需要给子div设置不同宽度。用变量拼接Tailwind类名的方式在map循环中不生效，Tailwind无法识别w-[xxxpx]这类动态生成的样式。

我的代码：

import { FC } from 'react';

const randomWidthArray = ["110", "94", "123", "87", "93", "113", "125", "120"]

const CategorySkeleton: FC = () => {
  return (
    <div className="flex flex-col w-[300px] border-r border-r-[#D5D5D5] gap-y-[8px]">
      <div className="w-[150px] h-[28px] mb-[14px] bg-[#D5D5D5]"></div>
      {randomWidthArray.map((width: string, idx: number) => {
        const widthStyle = `w-[${width}px]`;
        return <div key={idx} className={`h-[19px] bg-[#D5D5D5] ${widthStyle}`}></div>;
      })}
    </div>
  );
};

export default CategorySkeleton;

尝试过用数字/字符串类型的变量、直接在className中拼接，都没解决问题。

问题原因 #

Tailwind的JIT编译器是静态扫描代码生成CSS的，它只会识别代码中明确写出的类名（比如w-[110px]）。动态拼接的类名（比如w-[${width}px]）在构建阶段是字符串模板，编译器无法解析变量的具体值，因此不会生成对应的CSS规则，导致样式不生效。

解决方案 #

方案1：使用内联样式（最直接）

既然宽度是动态值，直接通过style属性设置宽度，绕过Tailwind的类名限制：

import { FC } from 'react';

const randomWidthArray = ["110", "94", "123", "87", "93", "113", "125", "120"]

const CategorySkeleton: FC = () => {
  return (
    <div className="flex flex-col w-[300px] border-r border-r-[#D5D5D5] gap-y-[8px]">
      <div className="w-[150px] h-[28px] mb-[14px] bg-[#D5D5D5]"></div>
      {randomWidthArray.map((width: string, idx: number) => {
        return (
          <div 
            key={idx} 
            className="h-[19px] bg-[#D5D5D5]"
            style={{ width: `${width}px` }}
          ></div>
        );
      })}
    </div>
  );
};

export default CategorySkeleton;

方案2：提前静态声明所有用到的类名

如果坚持要用Tailwind类名，可以在代码中静态写出所有需要的宽度类（比如用隐藏元素），让编译器扫描到：

// 静态声明所有宽度类，让Tailwind识别
<div className="hidden w-[110px] w-[94px] w-[123px] w-[87px] w-[93px] w-[113px] w-[125px] w-[120px]"></div>

// 原map循环代码不变
{randomWidthArray.map((width: string, idx: number) => {
  const widthStyle = `w-[${width}px]`;
  return <div key={idx} className={`h-[19px] bg-[#D5D5D5] ${widthStyle}`}></div>;
})}

方案3：在Tailwind配置中自定义宽度

把所有需要的宽度加到tailwind.config.js的theme.extend.width里，然后用静态类名：

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      width: {
        '110': '110px',
        '94': '94px',
        '123': '123px',
        '87': '87px',
        '93': '93px',
        '113': '113px',
        '125': '125px',
        '120': '120px',
      },
    },
  },
};

然后修改组件中的类名：

{randomWidthArray.map((width: string, idx: number) => {
  return <div key={idx} className={`h-[19px] bg-[#D5D5D5] w-${width}`}></div>;
})}

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