Angular14+SCSS项目无法使用Tailwind CSS类求助

一、清理无效配置并安装正确依赖 #

先移除可能导致冲突的包，再安装必需依赖：

npm uninstall -D @angular-builders/custom-webpack postcss-loader
npm install -D tailwindcss postcss autoprefixer postcss-nesting

二、初始化配置文件 #

执行命令自动生成Tailwind和PostCSS的基础配置文件：

npx tailwindcss init -p

三、调整 tailwind.config.js #

保留important: true以覆盖原有SCSS样式，确保扫描路径正确：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{html,ts}", // 扫描所有HTML、TS文件中的Tailwind类
  ],
  important: true,
  theme: {
    extend: {},
  },
  plugins: [],
}

四、修正 postcss.config.js #

解决嵌套CSS警告，同时修复PostCSS Loader的配置错误：

module.exports = {
  plugins: {
    'postcss-nesting': {}, // 必须放在Tailwind插件之前
    tailwindcss: {},
    autoprefixer: {},
  },
}

五、修改全局 styles.scss #

将Tailwind导入语句放在文件最顶部，避免被其他SCSS样式覆盖：

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

// 你的其他全局SCSS样式写在下方

六、验证配置效果 #

1. 重启开发服务器：ng serve
2. 在任意组件HTML中添加测试代码：

<div class="bg-red-500 text-white p-4">测试Tailwind样式</div>

3. 检查浏览器是否渲染出红色背景、白色文字的盒子，同时构建时的嵌套CSS警告应消失。

补充：若需保留 custom-webpack #

如果必须使用自定义webpack配置，修改webpack配置文件，将PostCSS插件放入postcssOptions中：

module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: [
                  require('postcss-nesting'),
                  require('tailwindcss'),
                  require('autoprefixer'),
                ],
              },
            },
          },
        ],
      },
    ],
  },
};

同时确保angular.json中的builder配置正确指向该webpack文件。

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