传递Prop值并使用模板字面量时TailwindCSS样式不生效（TypeScript）

我在NextJS中开发了一个PrimaryButton组件，采用TailwindCSS进行样式设置。该组件接收size属性，当我通过Prop传递size值并在模板字面量中使用时，样式无法正确生效。尽管控制台显示元素已应用相关CSS属性，但视觉上并未呈现预期样式。

组件代码 #

import Link from "next/link";
import React from "react";

type Props = {
  size: number;
};

export default function PrimaryButton({ size }: Props) {

  const textSize = size ? `text-[${size.toString()}px]` : "";

  // Styling
  const primaryBtnStyle = `text-white p-2 bg-gradient-to-r from-indigo-400 to-rose-400 rounded-3xl ${textSize}`;

  return (
    <>
      <Link href="/signup" className={primaryBtnStyle}>
        Signup
      </Link>
    </>
  );
}

组件使用示例 #

<PrimaryButton size={24} />

原因与解决方法 #

核心原因 #

TailwindCSS的JIT编译器是静态扫描代码中的类名来生成最终CSS的。你通过模板字符串动态拼接text-[${size}px]这类类名时，编译器在构建阶段无法预知具体的数值，因此不会生成对应的CSS规则。虽然浏览器控制台能看到类名被添加到元素上，但实际上没有对应的样式代码，所以视觉上没有效果。

解决方法1：使用内联样式直接控制 #

这是最直接的方式，绕过Tailwind的静态扫描限制，直接通过style属性设置字体大小：

import Link from "next/link";
import React from "react";

type Props = {
  size: number;
};

export default function PrimaryButton({ size }: Props) {
  return (
    <Link 
      href="/signup" 
      className="text-white p-2 bg-gradient-to-r from-indigo-400 to-rose-400 rounded-3xl"
      style={{ fontSize: size ? `${size}px` : undefined }}
    >
      Signup
    </Link>
  );
}

解决方法2：预定义可选尺寸，使用静态类名 #

如果你的按钮尺寸是固定的几个选项，可以提前映射对应的Tailwind静态类名，避免动态拼接：

import Link from "next/link";
import React from "react";

type Props = {
  size: 'sm' | 'md' | 'lg' | 'xl';
};

export default function PrimaryButton({ size }: Props) {
  const sizeClassMap = {
    sm: 'text-sm',
    md: 'text-base',
    lg: 'text-xl',
    xl: 'text-2xl'
  };

  const primaryBtnStyle = `text-white p-2 bg-gradient-to-r from-indigo-400 to-rose-400 rounded-3xl ${sizeClassMap[size]}`;

  return (
    <Link href="/signup" className={primaryBtnStyle}>
      Signup
    </Link>
  );
}

解决方法3：自定义CSS工具类结合CSS变量 #

如果需要支持更灵活的数值，可以通过自定义Tailwind工具类+CSS变量的方式实现：

1. 在全局CSS文件（比如globals.css）中添加自定义工具类：

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  .text-dynamic {
    font-size: var(--text-size);
  }
}

2. 在组件中使用该类并设置CSS变量：

import Link from "next/link";
import React from "react";

type Props = {
  size: number;
};

export default function PrimaryButton({ size }: Props) {
  return (
    <Link 
      href="/signup" 
      className="text-white p-2 bg-gradient-to-r from-indigo-400 to-rose-400 rounded-3xl text-dynamic"
      style={{ '--text-size': size ? `${size}px` : undefined }}
    >
      Signup
    </Link>
  );
}

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