Angular项目中Tailwind CSS插件（如@tailwindcss/forms）不生效求助

我在Angular 16（亦试过Angular 13）项目中集成Tailwind CSS，基础CSS功能正常，但@tailwindcss/forms等插件的样式完全不生效。

已执行的安装操作 #

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init
npm install -D @tailwindcss/forms

当前关键配置 #

tailwind.config.js #

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: [
        "./src/**/*.{html,ts}",
        "./src/index.html"
    ],
    theme: {
        extend: {},
    },
    plugins: [
        require("@tailwindcss/forms")({
            strategy: "class",
        }),
        require('prettier-plugin-tailwindcss'),
        require('flowbite/plugin')
    ],
};

styles.css #

@tailwind base;
@tailwind components;
@tailwind utilities;

项目结构 #

.
└── MyApp/
    ├── node_modules
    ├── src/
    │   ├── app/
    │   │   ├── other-modules/
    │   │   │   └── ...
    │   │   ├── app.module.ts
    │   │   ├── app.component.ts
    │   │   ├── app.component.html
    │   │   └── ...
    │   ├── index.html
    │   ├── styles.css
    │   └── ...
    ├── tailwind.config.js
    └── ...

测试代码（app.component.html） #

<input type="email" name="email" id="email" class="form-input" placeholder="Enter your email">

依赖版本（取自package.json） #

• Tailwind CSS v3.3.2
• @tailwindcss/forms v0.5.3
• Angular v16.0.0

修复步骤 #

1. 添加PostCSS配置文件
   项目根目录必须存在postcss.config.js，否则Tailwind插件样式无法被正确编译，内容如下：

   module.exports = {
     plugins: {
       'postcss-import': {},
       tailwindcss: {},
       autoprefixer: {},
     },
   };
   

2. 清理缓存并重装依赖
   执行以下命令彻底清理缓存与依赖，避免残留问题：

   ng cache clean --all
   rm -rf node_modules package-lock.json
   npm install
   ng serve
   

3. 验证插件策略配置
   当前使用strategy: "class"，需手动给表单元素添加form-*类，逻辑正确，但可临时切换至base策略测试：

   require("@tailwindcss/forms")({
       strategy: "base", // 全局注入基础表单样式，无需手动加类
   }),
   

   若切换后样式生效，说明原class策略下类名使用或配置存在疏漏，再切回class策略排查。

4. 确认content配置覆盖所有模板
   确保tailwind.config.js的content数组包含所有可能用到插件样式的文件，避免遗漏懒加载模块路径：

   content: [
     "./src/**/*.{html,ts}",
     "./src/index.html",
     "./src/app/**/*.{html,ts}"
   ],
   

5. 排查插件冲突
   暂时移除require('flowbite/plugin')，重启服务测试。Flowbite与@tailwindcss/forms可能存在配置冲突，确认冲突后调整加载顺序或配置细节。

6. 检查Angular构建样式配置
   打开angular.json，确认build配置的styles数组仅包含src/styles.css，避免其他CSS文件覆盖插件样式：

   "styles": [
     "src/styles.css"
   ],
   

内容的提问来源于stack exchange，提问作者João Pedro