React/Next.js中Tailwind动态拼接text-*xl类不生成CSS如何解决

Tailwind 的CSS按需生成依赖静态代码扫描识别完整的类名字符串，你代码中动态拼接的text-${size}xl类名不会被识别为有效Tailwind类，因此不会生成对应样式。只有静态写死的完整类名才会被扫描工具捕获，这就是你手动写死类名后样式恢复正常的原因。

方案1：配置Tailwind safelist（最推荐） #

直接在tailwind.config.js中把你需要用到的9个字号类加入安全列表，Tailwind会强制生成这些类的样式，同时不会破坏其他类的按需生成逻辑，产物体积仅会增加这9个类对应的少量CSS。
配置示例：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  safelist: [
    {
      pattern: /^text-[1-9]xl$/,
    }
  ],
  // 其余原有配置保持不变
}

这个方案下你原来的Title组件代码不需要做任何修改，即可正常运行。

方案2：组件内静态映射类名（无需修改Tailwind配置） #

如果不想改动项目配置，可以把所有可能用到的字号类提前写成静态映射对象，不要做字符串拼接，这样所有类名都是静态存在于代码中，Tailwind可以正常扫描识别。
改造后的组件代码示例：

// 提前定义所有可能用到的字号类，不做动态拼接
const sizeMap = {
  1: 'text-1xl',
  2: 'text-2xl',
  3: 'text-3xl',
  4: 'text-4xl',
  5: 'text-5xl',
  6: 'text-6xl',
  7: 'text-7xl',
  8: 'text-8xl',
  9: 'text-9xl',
}

const Title = ({ children, className, style, level, size }) => {
  const commonClass = 'font-extrabold uppercase mb-4';
  const fontSize = size ? sizeMap[size] : sizeMap[level];
  // 可简化原有switch逻辑，用动态标签生成元素
  const Tag = level ? `h${level}` : 'div';

  return (
    <Tag 
      className={`${fontSize} ${commonClass} ${className || ''}`}
      style={style}
    >
      {children}
    </Tag>
  );
};

export default Title;

这个方案不需要改动Tailwind配置，同时还能简化原有组件的重复代码。

内容的提问来源于stack exchange，提问作者Ondřej Ševčík