angular集成tailwind需绕过cli默认样式链，必须用ngx-build-plus或自定义webpack注入postcss-loader处理@tailwind指令，否则指令被忽略；purge配置须覆盖.ts文件，material与tailwind共存时注意class优先级。
Angular项目集成Tailwind CSS不是“装完插件就能用”，关键在于绕过Angular CLI默认的样式处理链——它不原生支持PostCSS，而Tailwind依赖PostCSS解析@tailwind指令。直接在styles.css里写@tailwind base会被忽略，编译后空空如也。
Angular CLI不支持PostCSS，必须引入额外构建层
Angular CLI 16+ 仍默认使用sass或css loader，但不加载postcss-loader。Tailwind的@tailwind、@apply等指令必须经PostCSS处理才能转成真实CSS规则。所以不能只靠ng add或改angular.json styles字段解决。
- 必须用
ngx-build-plus或自定义Webpack配置注入postcss-loader，否则@tailwind base等语句原样保留在输出中，无任何样式生效 -
ng build --extra-webpack-config是目前最稳定的方式；ng serve也得配对应命令，否则开发时热更新不触发Tailwind重编译 - 别尝试用
stylePreprocessorOptions硬塞postcss.config.js——Angular CLI会忽略它，白配
tailwind.config.js 的 purge 配置必须匹配 Angular 文件结构
Angular模板分散在.html、.ts（内联模板）、甚至.spec.ts里，purge若只扫src/**/*.html，会导致大量工具类被误删——比如class="text-red-500"写在组件template属性里，就根本不会被识别。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 正确写法：
content: ["./src/**/*.{html,ts,tsx}"]（注意包含ts） - Angular 17+ 启用
standalone组件后，template字符串字面量也要纳入扫描，ts后缀必不可少 - 如果用了
i18n或动态innerHTML拼接class名，这些运行时生成的类名无法被purge识别，需加到safeList里，例如['bg-[#123456]']
Material 和 Tailwind 共存时 class 优先级容易失控
Angular Material自带大量!important和高特异性选择器（如.mat-button），而Tailwind默认不加!important。结果常是Material样式覆盖Tailwind，比如class="bg-blue-500 text-white p-3 rounded" applied到<button mat-raised-button></button>上，按钮背景色还是Material主题色。
- 临时解法：在
tailwind.config.js里设important: true，让所有Tailwind类带!important（不推荐长期用） - 更稳妥做法：避免在Material组件上直接混用Tailwind工具类，改用
::ng-deep或Component SCSS覆盖，或用ngClass动态切换预定义class组合 - Material的
prebuilt-themesCSS文件必须放在angular.json的styles数组最前面，Tailwind的styles.scss放后面，确保Tailwind能局部覆盖
真正麻烦的不是安装步骤，而是Angular的构建抽象层和Tailwind的PostCSS依赖之间存在天然断层——你得主动打一个补丁，而不是期待框架自动缝合。漏掉postcss-loader或purge路径错一位，都只会让你对着空白页面查半小时控制台。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
