React组件初始渲染时动态Tailwind CSS类未正确生效

我实现了一个Y轴滚动列表，现在正在开发一个React组件，根据props中的deviceWidth动态应用Tailwind CSS类。问题在于首次渲染时，组件未应用预期样式；但如果先硬编码值再切换回动态方式，样式就能正确生效。

代码示例 #

import React, { useState, useEffect, useRef } from 'react';

function Hero(props) {
  const [currentIndex, setCurrentIndex] = useState(40);
  const myRef = useRef(null);

  useEffect(() => {
    const element = myRef.current;
    let intervalId;

    const updateScroll = () => {
      if (currentIndex <= 160) {
        setCurrentIndex(prevIndex => prevIndex + 40);
        element.scroll({ top: currentIndex, behavior: 'smooth' });
      } else {
        setCurrentIndex(0);
        element.scroll({ top: currentIndex, behavior: 'smooth' });
      }
    };

    intervalId = setInterval(updateScroll, 1000);

    return () => clearInterval(intervalId);
  }, [currentIndex]);

  const roles = ["Title 1", "Title 2", "Title 3", "Title 4"];
  const sizing = {
    "sm" : {
        h: "2",
        t: "4"
    }, 
    "md" :{
        h: "4",
        t: "5"
    },
    "lg" :{
        h: "6",
        t: "6"
    }   
  };

  const deviceSizing = sizing[props.deviceWidth] || sizing.sm;

  return (
    <header className="mt-6 flex flex-col">
      <div className="text-center text-4xl font-semibold">I'm</div>
      <div className={`m-2 h-${deviceSizing.h} snap-y snap-mandatory overflow-y-hidden text-center text-${deviceSizing.t}xl font-semibold`} ref={myRef}>
        {roles.map(item => (
          <div key={item} className="mb-2 snap-center underline decoration-green-500">{item}</div>
        ))}
      </div>
    </header>
  );
}

export default Hero;

复现步骤 #

• 创建一个基于props动态使用Tailwind CSS类的React组件。
• 为deviceWidth props传入不同值，观察初始渲染效果。
• 发现首次渲染时样式未正确应用。

已尝试方案 #

• 硬编码值替代动态方式可正常生效。
• 先硬编码再切换回动态方式可临时解决问题。

核心问题 #

如何确保Tailwind CSS在初始渲染时正确应用动态类？

附加信息 #

• 已启用Tailwind CSS的JIT模式。
• 无论deviceWidth传入"sm"、"md"还是"lg"，问题均存在。

解决方案 #

Tailwind JIT模式会在构建时扫描代码中明确出现的类名，动态拼接的类名（比如h-${deviceSizing.h}）默认不会被识别，这就是初始渲染样式不生效的核心原因。以下是几种可行的解决方式：

1. 提前声明所有可能用到的类

在组件中通过注释或隐藏元素，明确写出所有动态生成的类，让Tailwind扫描到它们：

{/* 告诉Tailwind需要生成这些类 */}
<div className="h-2 h-4 h-6 text-4xl text-5xl text-6xl hidden"></div>

这种方式简单直接，适合类数量较少的场景。

2. 使用clsx工具管理动态类

用专门的类名工具明确列出所有可能的类组合，确保Tailwind能识别：
首先安装clsx：

npm install clsx

然后修改组件中的类名逻辑：

import clsx from 'clsx';

// ...

const deviceClasses = clsx(
  "m-2 snap-y snap-mandatory overflow-y-hidden text-center font-semibold",
  {
    "h-2 text-4xl": props.deviceWidth === "sm",
    "h-4 text-5xl": props.deviceWidth === "md",
    "h-6 text-6xl": props.deviceWidth === "lg",
  }
);

// 在JSX中使用
<div className={deviceClasses} ref={myRef}>

这种写法清晰直观，同时避免了动态拼接的问题，是最推荐的方案。

3. 扩展Tailwind配置定义自定义类

在tailwind.config.js中定义对应设备尺寸的自定义类，统一管理样式逻辑：

module.exports = {
  theme: {
    extend: {
      height: {
        'role-sm': '0.5rem', // 对应h-2
        'role-md': '1rem',   // 对应h-4
        'role-lg': '1.5rem', // 对应h-6
      },
      fontSize: {
        'role-sm': '2.25rem', // 对应text-4xl
        'role-md': '3rem',    // 对应text-5xl
        'role-lg': '3.75rem', // 对应text-6xl
      },
    },
  },
};

然后在组件中直接使用这些自定义类：

const deviceSizing = {
  "sm": "role-sm",
  "md": "role-md",
  "lg": "role-lg"
};

// ...
<div className={`m-2 h-${deviceSizing[props.deviceWidth]} text-${deviceSizing[props.deviceWidth]} snap-y snap-mandatory overflow-y-hidden text-center font-semibold`} ref={myRef}>

这种方式适合样式逻辑复杂、需要统一维护的场景。

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