如何为使用Sass的Angular 19应用配置TailwindCSS 4

针对你遇到的一系列问题，以下是精准的配置步骤，逐一解决所有报错：

1. 清理旧依赖并安装正确的 Tailwind v4 包 #

首先卸载旧版 Tailwind 及配套的 PostCSS、Autoprefixer（v4 不再依赖这些），安装 v4 核心包和 Angular 专用集成插件：

npm uninstall tailwindcss postcss autoprefixer
npm install tailwindcss@4 @tailwindcss/angular

2. 初始化 Tailwind 配置文件 #

执行初始化命令生成最新格式的 tailwind.config.js：

npx tailwindcss init

打开配置文件，确保 content 数组正确覆盖你的 Angular 项目文件（包含 HTML、TS、SCSS）：

export default {
  content: [
    "./src/**/*.{html,ts,scss}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

3. 重构 SCSS 引入方式，避免 angular-sass 冲突 #

步骤 3.1 创建独立的 Tailwind 入口文件 #

在 src/styles 目录下新建 _tailwind.scss 文件（下划线表示局部文件，避免被单独编译），内容如下：

// 注意：@config 必须放在所有 @use 指令之前，且路径要相对于当前文件
@config "../../tailwind.config.js";
@use "tailwindcss";
@use "tailwindcss/components";
@use "tailwindcss/utilities";

步骤 3.2 在全局样式中引入该文件 #

修改 src/styles.scss，用 @use 引入上面的局部文件：

@use "./styles/_tailwind.scss";

4. 组件中正确使用 @apply #

在组件的 SCSS 文件中，必须先通过 @use 引入全局的 Tailwind 配置，才能使用 @apply：

// 路径根据你的项目结构调整，确保指向 _tailwind.scss
@use "../../styles/_tailwind.scss";

.custom-card {
  @apply bg-gray-100 p-6 rounded-lg shadow-sm;
}

5. 调整 Angular 配置，确保 Sass 模块系统正常工作 #

打开 angular.json，找到 build 和 test 目标的 stylesPreprocessorOptions，添加 includePaths 指向 node_modules，让 Sass 能正确解析 @use "tailwindcss"：

"architect": {
  "build": {
    "options": {
      // ... 其他配置
      "stylesPreprocessorOptions": {
        "includePaths": [
          "node_modules"
        ]
      }
    }
  },
  "test": {
    "options": {
      // ... 其他配置
      "stylesPreprocessorOptions": {
        "includePaths": [
          "node_modules"
        ]
      }
    }
  }
}

6. 验证配置 #

重启 Angular 开发服务器：

ng serve

此时应该满足：

• 无 angular-sass 弃用警告
• @apply bg-gray-100 等工具类正常生效
• tailwind.config.js 中的主题配置（如自定义颜色）能正确应用

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