如何为新的 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 => architect => build
  - 将生成器更改为 "builder": "@angular-builders/custom-webpack:browser",
  - 加入选项

.

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

搜索关键项目=> my-app => architect => serve
- 将生成器更改为 "builder": "@angular-builders/custom-webpack:dev-server",
- 加入选项

.

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

我遇到了这个错误

ERROR in ./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) Module build failed (from ./node_modules/postcss-loader/dist/cjs.js): ValidationError: Invalid options object. PostCSS Loader has been initialized using an options object that does not match the API schema.

options has an unknown property 'plugins'. These properties are valid: object { postcssOptions?, execute?, sourceMap? } at validate (/.../my-app/node_modules/schema-utils/dist/validate.js:98:11) at Object.loader (/.../my-app/node_modules/postcss-loader/dist/index.js:43:28)

ERROR in Module build failed (from ./node_modules/postcss-loader/dist/cjs.js): ValidationError: Invalid options object. PostCSS Loader has been initialized using an options object that does not match the API schema.

same text as above

如何正确设置 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

进口是 'tailwindcss'，不是 'tailwind'：

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

Answer 3

我设法让 Angular 10 + Angular Material 使用 Tailwind CSS 使用此差异中突出显示的配置 - Tailwind CSS support in Angular 10, with Angular Material.

除了question/answers中已经突出显示的内容之外的一些关键点：

需要显式安装 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 文件（即 webpack.config.js 中的 test: /tailwind\.scss$/）来限制将由 postcss 处理的 scss 文件。

到目前为止，看起来它正在运行。

Answer 4

安装 TailwindCSS（Angular 版本

如果你的Angular版本大于或等于11.2.0，可以跳过这一段

在我个人看来，在版本低于 11.2.0 的 Angular 应用程序中使用 TailwindCSS 的最简单方法是使用 @ngneat/tailwind npm 包。我对它有很好的体验（即插即用）。

第一步是运行您的 Angular 项目中的以下原理图：ng add @ngneat/tailwind
当系统询问您是否要启用深色模式时select class
当被问及是否愿意在组件样式中使用 Tailwind 指令和函数时？ selectYes
当被问及您想要启用哪些 TailwindCSS 插件时，select forms 和 typography 或全部。由你决定。

在 Angular 应用程序中安装 TailwindCSS 后，我们需要关注 4 个部分。

-创建了一个新文件 tailwind.config.js 它应该看起来像 this

-创建了一个新文件 webpack.config.js 它应该看起来像 this

-新 dark class 添加到您的 index.html body 元素

<body class="dark">
  <app-root></app-root>
</body>

-一些导入已添加到您的 styles.scss 文件

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

注意：要在您的生产版本中打开清除功能，请关注这条小推文

可选

观看 this 由我的朋友 Beeman 制作的精彩视频。它向您展示了如何在 3 分钟内在 Angular 中使用 TailwindCSS！

如果您想在 Angular 11.2.0

中学习如何操作

https://dev.to/angular/setup-tailwindcss-in-angular-the-easy-way-1i5l

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

How to setup Tailwind for a new Angular project?

javascript

webpack

angular-cli

angular

tailwind-css