angular cli 默认不支持 tailwind 的 content 扫描，因其内置构建流程绕过 postcss 标准链路，不解析 tailwind.config.js 的 content 字段，也不扫描 html/ts 文件中的 class 字面量，导致 jit 编译、按需提取失效。
Angular 项目里直接 import "tailwindcss/tailwind.css" 或靠 Webpack 手动配 postcss-loader，基本等于放弃 Tailwind 的 JIT 编译能力和类名按需提取——打包体积暴涨、开发时样式响应卡顿、darkMode: 'class' 失效、动态 class（如 class="text-{{size}}"）全丢失。
为什么 Angular CLI 默认不支持 Tailwind 的 content 扫描？
Angular CLI 内置的构建流程绕过了 PostCSS 的标准链路，它不解析 tailwind.config.js 中的 content 字段，也不会扫描 .html 和 .ts 文件里的字面量 class。你手动加 @import "tailwindcss/base" 到 styles.scss，只相当于加载了一个静态快照，不是活的 Tailwind 构建管道。
- CLI 不触发 Tailwind 的 JIT 引擎，所有未在源码中“显式出现”的类（哪怕逻辑上一定会用到）都会被 Purge 阶段干掉
-
ng build时不会重新生成 CSS，改了 HTML 模板里的bg-blue-500，得手动跑npx tailwindcss -i ...才生效 - Angular 的
ViewEncapsulation机制和 Tailwind 的全局 utility 类天然共存，但前提是 CSS 必须在构建早期注入，而不是后期拼接
必须用 @angular-builders/custom-webpack + postcss-loader
这是目前 Angular 14+（含 v17/v18）唯一能稳定接入 Tailwind 完整能力的方案。它把 Tailwind 插入到 Angular CLI 的 Webpack 流程中，在 style 资源处理阶段就完成 CSS 解析与生成。
- 安装依赖：
npm i -D @angular-builders/custom-webpack postcss postcss-loader tailwindcss autoprefixer - 在项目根目录新建
webpack.config.js，内容严格为：
const tailwindcss = require('tailwindcss');
const autoprefixer = require('autoprefixer');
module.exports = {
module: {
rules: [
{
test: /\.scss$/,
use: [
'to-string-loader',
'css-loader',
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: [tailwindcss, autoprefixer],
},
},
},
],
},
],
},
};
- 修改
angular.json，把默认的"builder": "@angular-devkit/build-angular:application"替换为：
"builder": "@angular-builders/custom-webpack:application",
"options": {
"customWebpackConfig": {
"path": "./webpack.config.js"
}
}
- 确保
src/styles.scss顶部三行是完整的：@tailwind base;、@tailwind components;、@tailwind utilities;
tailwind.config.js 的 content 必须覆盖 .html 和 .ts
哪怕你用了 @angular-builders/custom-webpack，如果 content 字段漏掉关键路径，Tailwind 依然会误删类名——尤其 Angular 模板语法不是纯 HTML，必须让扫描器能识别 <div size> 这类绑定，但注意：它只认字面量，不认运行时拼接。
<ul>
<li>正确写法（支持模板、组件类、动态 import）：<code>content: ["./src/**/*.{html,ts,tsx}"]
defineAsyncComponent 或路由懒加载，需额外加上异步模块路径，例如："./src/app/features/**/*.{html,ts}"
purge 字段；important: true 在 Angular 里通常不需要，因为组件封装天然隔离作用域flex-col，看构建后 CSS 里是否还存在——不存在，说明 content 配置失败最常被忽略的一点：Tailwind 的类名提取完全依赖源码中的字符串字面量，[class]="'text-' + size" 或 class="{{'p-' + padding}}" 这类写法，无论 size 和 padding 值多么确定，都不会被扫描到。真要动态，得用 ngClass 显式列出所有可能值，或提前在 tailwind.config.js 的 theme.extend 里注册变体。
