React中部分Tailwind CSS类失效问题求助

Tailwind CSS的JIT编译器依赖静态扫描代码中的完整类名生成对应CSS样式。你通过字符串拼接生成的类名（比如w-${props.width}/4、h-${props.height}），编译器无法提前识别这些动态组合的类，因此只有代码中硬编码出现过的类（比如w-1/4）会被生成，未被静态扫描到的类（比如w-3/4、h-36）不会出现在最终CSS里，导致失效。

1. 传递完整类名字符串（最直接） #

修改Tile组件，直接接收宽度和高度的完整类名，而非拆分数字参数：

export function Tile(props: PropsWithChildren<{ widthClass: string; heightClass: string }>) {
    return (
        <div
            className={`bg-default-800 m-2 rounded-lg flex flex-col justify-center ${props.widthClass} ${props.heightClass}`}>
            {props.children}
        </div>
    )
}

使用时传入完整类名：

function App() {
  return (
    <div className="flex flex-row flex-wrap">
        <Tile widthClass="w-1/4" heightClass="h-36">
            tile 1
        </Tile>
        <Tile widthClass="w-3/4" heightClass="h-36">
            tile 2
        </Tile>
    </div>
  )
}

这样Tailwind能直接扫描到w-1/4、w-3/4、h-36这些完整类名，正常生成样式。

2. 在配置中明确扩展所需尺寸 #

如果希望保留数字参数传递方式，可在tailwind.config.cjs中明确添加需要的宽度和高度值，强制Tailwind生成对应类：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {
      colors: {
        'default': {
          '800': '#166534',
        },
      },
      width: {
        '1/4': '25%',
        '3/4': '75%',
        // 按需添加其他宽度值
      },
      height: {
        '36': '9rem',
        '32': '8rem',
        // 按需添加其他高度值
      }
    },
  },
  plugins: [],
}

配置后，Tailwind会生成指定的尺寸类，动态拼接的类名即可生效。

3. 使用安全类名拼接工具（推荐） #

用clsx或tailwind-merge工具拼接类名，同时确保动态类的可能值被Tailwind扫描到。可在组件中列出所有可能的类名变体，让编译器检测到：

import clsx from 'clsx';

// 提前列出所有可能的类名，让Tailwind扫描到
const possibleWidths = ['w-1/4', 'w-3/4', 'w-1/2'];
const possibleHeights = ['h-32', 'h-36', 'h-40'];

export function Tile(props: PropsWithChildren<{ width: number; height: number }>) {
    const widthClass = `w-${props.width}/4`;
    const heightClass = `h-${props.height}`;
    
    return (
        <div
            className={clsx('bg-default-800 m-2 rounded-lg flex flex-col justify-center', widthClass, heightClass)}>
            {props.children}
        </div>
    )
}

也可以直接在注释中列出类名（Tailwind会扫描注释内容），无需实际使用数组变量。

• h-36不属于Tailwind默认核心高度类（默认只有h-1到h-32、h-40等间隔值），即使不动态拼接，直接写h-36也需要在配置中扩展或使用自定义值，这也是h-36失效的原因之一。
• 你遇到的“改回动态拼接又生效”的怪异现象，大概率是之前硬编码类名时Tailwind已生成对应CSS，缓存未过期；后续缓存更新后会再次失效。

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