如何为新的 Angular 项目设置 Tailwind？

Question

我想使用 Tailwind CSS 创建一个新的 Angular 项目。我当前的 CLI 版本是 10.1.1。到目前为止我做过的事情：

• 使用创建一个新的应用程序 ng new my-app
• 使用 Angular 路由 => 是
• 使用 SCSS 作为样式表
• 在项目根目录下运行 npm i tailwindcss postcss-import postcss-loader postcss-scss @angular-builders/custom-webpack -D
• 在src文件夹中有一个styles.scss文件，修改为

.

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

• 在项目根目录下运行 npx tailwind init
• 在项目根目录新建一个文件webpack.config.js，内容如下

.

module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        loader: "postcss-loader",
        options: {
          ident: "postcss",
          syntax: "postcss-scss",
          plugins: () => [
            require("postcss-import"),
            require("tailwindcss"),
            require("autoprefixer"),
          ],
        },
      },
    ],
  },
};

• 在根目录中有一个Angular.json文件
  • 搜索关键项目 => my-app => 架构师 => 构建
    • 将构建器更改为 "builder": "@angular-builders/custom-webpack:browser",
    • 添加到选项

.

"customWebpackConfig": {
    "path": "./webpack.config.js"
},

• 搜索重点项目 => my-app => 架构师 => 服务
  • 将构建器更改为 "builder": "@angular-builders/custom-webpack:dev-server",
  • 添加到选项

.

"customWebpackConfig": {
    "path": "./webpack.config.js"
},

• ng serve从应用程序的根目录运行应用程序

我收到这个错误

./src/styles.scss 中的错误 (./node_modules/css-loader/dist/cjs.js??ref--13-1!./node_modules/@angular-devkit/build-angular/node_modules/postcss-loader /src??embedded!./node_modules/resolve-url-loader??ref--13-3!./node_modules/sass-loader/dist/cjs.js??ref--13-4!./node_modules/ postcss-loader/dist/cjs.js??postcss!./src/styles.scss) 模块构建失败（来自 ./node_modules/postcss-loader/dist/cjs.js）：ValidationError：无效的选项对象。PostCSS Loader 已使用与 API 架构不匹配的选项对象进行初始化。

• options 有一个未知的属性“插件”。这些属性是有效的： object { postcssOptions?, execute?, sourceMap? 在验证 (/.../my-app/node_modules/schema-utils/dist/validate.js:98:11) 在 Object.loader (/.../my-app/node_modules/postcss-loader/dist /index.js:43:28)

错误模块构建失败（来自 ./node_modules/postcss-loader/dist/cjs.js）：ValidationError：无效的选项对象。PostCSS Loader 已使用与 API 架构不匹配的选项对象进行初始化。

• 与上面相同的文本

如何正确设置 Tailwind？

Answer 1

我今天到处乱撞后找到了答案，将您的 webpack.config.js 更改为，

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

有一个小的变化，插件现在采用数组而不是函数。提前致谢 。

如果有人仍然遇到问题，请查看我在 Angular 10 + Tailwind CSS 上写的这篇博客

https://fullyunderstood.com/get-started-with-angular-tailwind-css/

Answer 2

我设法使用此差异中突出显示的配置使 Angular 10 + Angular Material 与 Tailwind CSS 一起使用 - Angular 10 中的 Tailwind CSS 支持和 Angular Material。

除了问题/答案中已经强调的内容之外，还有一些关键点：

• 需要显式安装 postcss (8.x)。不知何故，默认拉动（7.x）导致Error: true is not a PostCSS plugin.
• webpack.config.js 中的配置依赖于 postcss-loader 版本 4.x。
• 如果您使用的是 Angular Material，您将获得Error: Failed to find '~@angular/material/theming'. 为了解决这个问题，我通过分离 scss 文件（即test: /tailwind\.scss$/在 webpack.config.js 中）来限制将由 postcss 处理的 scss 文件。

到目前为止，看起来它正在工作。