Angular 项目集成 Tailwind CSS 必须绕过 CLI 内置样式处理器，用 PostCSS 独立编译生成 styles.css；需正确配置 content 扫描 TS/HTML 文件、避免动态 ngClass 导致误删，并手动同步 dark class 到 html 标签。
直接在 Angular 项目里用 ng add 或手动配 PostCSS 是行不通的 —— Angular CLI 内置的构建系统不认 tailwindcss 的 PostCSS 插件链，硬塞会导致样式不生效、@layer 被忽略、响应式断点失效等静默问题。
Angular CLI v15+ 必须绕过内置样式处理器
Angular 默认用自己的 sass / less 编译器处理 .scss 文件，而 Tailwind 需要 PostCSS 流水线（tailwindcss + autoprefixer）。你不能指望 angular.json 的 "styles" 字段直接加载 tailwind.css —— 它不会被 PostCSS 处理，@apply、@layer 全部失效。
- 正确路径是：把 Tailwind 的输出写进一个独立的
styles.css（不是.scss），再让 Angular CLI 把它当普通 CSS 加载 - 必须禁用 Angular 的样式预处理：在
angular.json中移除"stylePreprocessorOptions"，并确保"styles"数组里没有.scss文件参与 Tailwind 构建 - 用
postcssCLI 或 npm script 替代 Angular 构建流程中的样式编译环节
tailwind.config.js 的 content 路径必须匹配 Angular 的实际输出结构
Angular 构建时会把组件模板里的 class 字符串提取到 JS bundle 中，但 tailwindcss 的 content 配置只扫描源码文件。如果写成 ./src/app/**/*.html，开发时没问题；但生产构建后，HTML 模板已编译进 JS，purge（或 content）就找不到这些 class，导致大量工具类被误删。
- 推荐写法：
content: ["./src/**/*.{html,ts}"]—— 同时扫描模板和组件 TS 文件（因为[ngClass]、class绑定可能出现在 TS 里） - 若用了 Angular 的
inlineTemplate: true，必须包含.ts；否则只扫.html就够 - 绝对不要用
./dist/**/*—— 构建前 Tailwind 就跑完了，dist还不存在
动态 class 绑定与 ngClass 的兼容性陷阱
Tailwind 的原子类名（如 bg-blue-500、hover:scale-105）本质是静态字符串。但 Angular 的 [ngClass] 在运行时拼接 class 名时，如果传入的是对象字面量或计算属性，AOT 编译可能无法识别哪些类会被用到，导致 PurgeCSS 误删。
- 安全写法：
[ngClass]="{ 'text-red-500': hasError, 'opacity-75': isDisabled }"—— 键必须是纯字符串字面量 - 避免写法：
[ngClass]="getClasses()"或[ngClass]="dynamicClasses"（变量值在运行时才确定），这类 class 不会被content扫描到 - 更稳妥的替代：用
[class]绑定拼接好的完整 class 字符串，或改用class="{{ getClasses() }}"（需开启preserveWhitespaces: true）
最易被忽略的一点：Tailwind 的 dark: 变体依赖 class 切换机制（比如给 加 class="dark"），但 Angular 应用常通过 Renderer2 或服务动态切主题 —— 若没在根节点同步更新 class，dark:bg-gray-800 这类规则永远不触发。别只配 Tailwind，忘了在主题切换逻辑里手动操作 DOM class。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
