React中用模板字面量动态设置Tailwind CSS left属性不生效问题

问题场景 #

在React.js项目中使用Tailwind CSS时，遇到动态类样式不生效的问题：DOM树中已显示更新后的类名，但页面样式并未变化。具体是通过模板字面量动态设置left属性的场景，代码如下：

import React, { useState } from "react";

const MIN_VALUE = 10000;
const MAX_VALUE = 20000;

const InputRange = () => {
  const [value, setValue] = useState<number>(14000);

  const handleSliderChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setValue(parseInt(e.target.value));
  };

  return (
    <div className="mt-4 flex flex-col items-start w-full">
      <h2 className="text-base text-center text-primary-black font-bold">
        Update the range value
      </h2>
      <div className="relative pt-8 flex items-center justify-center w-full">
        <label
          htmlFor="rangeValue"
          className={`absolute top-0 left-[${value}px]`}
        >
          <span>RM{value}</span>
        </label>
        <input
          type="range"
          name="value"
          value={value}
          onChange={handleSliderChange}
          id="rangeValue"
          min={MIN_VALUE}
          max={MAX_VALUE}
          className="w-full"
        />
      </div>
    </div>
  );
};

export default InputRange;

Chrome浏览器DOM显示：label元素的class属性为absolute top-0 left-[15000px]，但对应的left样式未在页面生效。

原因分析 #

Tailwind CSS的JIT编译器仅会编译代码中静态存在的类名，动态拼接的类名（如left-[${value}px]）无法在构建阶段被扫描到，因此不会生成对应的CSS规则，导致DOM中存在类名但无匹配样式。

解决方案 #

方案1：使用行内样式（推荐） #

直接通过React的行内样式属性style设置动态值，不受Tailwind编译限制：

<label
  htmlFor="rangeValue"
  className="absolute top-0"
  style={{ left: `${value}px` }}
>
  <span>RM{value}</span>
</label>

方案2：预定义静态类（仅适合值范围有限的场景） #

若必须使用Tailwind类，可提前预定义所有可能的left值对应的类，再根据动态值选择。但此场景下value范围为10000-20000，步长过小，预定义类会导致CSS体积过大，因此不推荐。

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