Angular项目中Tailwind CSS任意值本地不生效，CDN引入正常

核心原因 #

本地安装的Tailwind采用构建时静态扫描+JIT编译，只会识别代码中静态存在的类名；而CDN版本是浏览器端实时解析类名，能处理运行时动态生成的类名。

你的代码ml-[{{type.level * 10}}px]里的{{type.level * 10}}是Angular的运行时插值，构建阶段Tailwind扫描到的只是ml-[{{type.level * 10}}px]这个字符串，不是具体的数值类名（比如ml-[20px]），所以不会生成对应的CSS规则，导致本地环境不生效；CDN版本会在页面运行时解析所有DOM上的类名，自然能识别动态生成的结果。

解决方案 #

1. 使用Angular样式绑定（推荐）

放弃动态类名，直接用Angular的属性绑定控制样式，这更符合Angular的开发范式，同时也能完美适配Tailwind：

<div [style.marginLeft.px]="type.level * 10"></div>

2. 让Tailwind提前识别可能的类名

如果必须使用类名形式，可通过safelist在tailwind.config.js中预生成所有可能的类：

module.exports = {
  // 其他配置...
  safelist: Array.from({ length: 10 }, (_, i) => `ml-[${i * 10}px]`)
  // 假设type.level的范围是0-9，生成ml-[0px]到ml-[90px]
}

这种方式适合数值范围有限的场景，避免构建出过多冗余CSS。

3. 基础配置检查

确保tailwind.config.js的content数组包含你的组件文件路径，保证Tailwind能扫描到项目中的类：

module.exports = {
  content: [
    "./src/**/*.{html,ts}",
  ],
  // 其他配置...
}

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