在Next.js中Tailwind动态拼接断点类名为何失效？

核心原因 #

这是Tailwind的静态扫描机制导致的：

• Tailwind在构建阶段会静态遍历代码里所有明确写出的类名，生成对应的CSS规则。动态拼接的max-${breakpoint}:hidden属于字符串模板，构建时Tailwind无法解析变量内容，因此不会生成对应的max-*:hidden CSS规则。
• 硬编码的max-md:hidden是固定的字面量类名，Tailwind能直接扫描识别，所以会正常生成对应样式。

和其他工具的关系 #

这个问题和Next.js、react-jss、PostCSS都无关——PostCSS只是负责执行Tailwind的编译逻辑，根源就是Tailwind本身的静态分析规则：它不会运行JS代码解析变量，只会识别字面量形式的类名。

解决方法 #

你可以提前枚举所有可能的类名，用映射表返回固定类：

const breakpointClassMap = {
  xs: 'block max-xs:hidden',
  sm: 'block max-sm:hidden',
  md: 'block max-md:hidden',
  xl: 'block max-xl:hidden',
};

function HideUnderBreakpoint({
  breakpoint,
  children,
}: {
  breakpoint: "xs" | "sm" | "md" | "xl";
  children: React.ReactNode;
}) {
  return <div className={breakpointClassMap[breakpoint]}>{children}</div>;
}

这样所有可能的类名都是明确写死的，Tailwind构建时能扫描到每一个，就能正常生成对应的CSS规则了。

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