React+Tailwind CSS中动态变量无法渲染样式的解决方案咨询

先修正核心计算错误 #

你代码里的circumference计算存在逻辑错误：length - 1 * 4会优先计算1*4，导致总间隙计算偏差，正确的总间隙应该是(length - 1) * cardsGap——因为length个卡片之间存在length-1个间隙。

为什么动态类名不生效？ #

你使用的w-[${circumference}px]这类动态Tailwind类名无法生效，原因是Tailwind基于构建时扫描静态类名生成CSS，运行时动态拼接的类名不会被编译到最终样式文件中，因此元素无法获取对应样式。

可行方案：使用行内style属性 #

直接通过元素的style属性设置动态样式，绕过Tailwind的静态编译限制，代码示例如下：

import React, { useState } from "react";
import carousel from "../assets/index";
import Image from "next/image";

const threeD = () => {
  const [cardWidth, setCardWidth] = useState(288);
  const length = carousel.length;
  const cardsGap = 4;
  // 修正间隙计算逻辑
  const circumference = length * cardWidth + (length - 1) * cardsGap;

  return (
    <div className={`carouselBox`}>
      <div
        className="flex"
        style={{
          gap: `${cardsGap}px`,
          width: `${circumference}px`,
          height: `${circumference}px`,
        }}
      >
        {carousel.map((item, index) => (
          <Image
            key={index}
            src={item}
            alt="carousel image"
            className="card"
            style={{ width: `${cardWidth}px` }}
          />
        ))}
      </div>
    </div>
  );
};

export default threeD;

可选：固定动态值的Tailwind方案（仅适用于已知宽度范围） #

如果你的cardWidth只有几个固定可选值，可以在tailwind.config.js中预定义这些值，再使用条件类名：

1. 修改tailwind.config.js：

module.exports = {
  theme: {
    extend: {
      width: {
        'card-288': '288px',
        'card-320': '320px',
        // 添加其他需要的固定宽度
      },
    },
  },
}

2. 在组件中使用条件类名：

// 假设cardWidth是预定义的288或320
<Image
  key={index}
  src={item}
  alt="carousel image"
  className={`card w-card-${cardWidth}`}
/>

这种方式仅适合固定值场景，完全动态的数值仍推荐使用行内style属性。

内容的提问来源于stack exchange，提问作者Surendra Singh Kamboj