Tailwind CSS v4.0.0中@layer utilities生成大量未使用类的原因排查

针对Tailwind CSS v4.0.0生成大量未使用工具类甚至出现h-56320这类异常类的情况，常见原因和排查方向如下：

• 内容扫描范围错误
  Tailwind通过静态扫描指定文件识别使用的类，如果tailwind.config.js里的content数组包含了无关路径（比如node_modules、旧备份文件、构建产物目录），它会扫描到这些文件里的测试代码、示例代码甚至废弃代码，进而生成对应的类。
  排查：检查content配置，只保留项目实际的源码路径（比如./src/**/*.{js,ts,jsx,tsx}），排除所有不需要扫描的目录。

• 动态类名的不当写法
  如果项目里用了动态拼接的类名（比如h-${someValue}），Tailwind的静态分析无法准确判断实际用到的数值，可能会误生成大量极端或不存在的类（比如h-56320）。v4的新引擎对动态类的解析逻辑和v3有差异，这类写法更容易触发问题。
  排查：把动态类改成Tailwind支持的写法，比如用h-[${someValue}px]明确指定单位，或者通过条件渲染使用预设的类名（比如{size === 'large' ? 'h-24' : 'h-16'}）。

• 构建缓存残留
  旧的构建缓存或Tailwind自身的缓存可能残留了之前生成的类，哪怕你已经删除了相关代码，重新构建时仍会被保留。
  排查：删除项目的构建缓存目录（比如Vite的.vite、Next.js的.next），同时删除Tailwind的缓存文件夹（通常是项目根目录下的.cache/tailwind），然后重新执行构建命令。

• 第三方依赖引入
  如果你引入了第三方组件库、UI框架或工具类库，哪怕你没用到某个组件，只要该组件的代码里包含h-56320这类测试用类，Tailwind扫描到就会生成对应的工具类。
  排查：暂时移除第三方依赖，重新构建看异常类是否消失，逐步定位到具体的依赖包，再查看该依赖的源码确认原因。

• 配置或插件错误
  检查tailwind.config.js，如果在theme.extend.height里误添加了56320这个值，或者安装的自定义插件错误地生成了大量height类，也会出现这种情况。
  排查：查看theme配置里的height项，同时检查安装的Tailwind插件，确认是否有逻辑错误导致生成异常类。

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