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

【问题标题】：How to setup Tailwind for a new Angular project?如何为新的 Angular 项目设置 Tailwind？
【发布时间】：2020-12-30 16:21:02
【问题描述】：

我想使用 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 加载器已经使用与 API 不匹配的选项对象进行初始化架构。

options 具有未知属性“plugins”。这些属性是有效的：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）：验证错误：无效选项对象。 PostCSS 加载器已使用选项初始化与 API 架构不匹配的对象。

与上述相同的文字

如何正确设置 Tailwind？

【问题讨论】：

也许这更容易：trungk18.com/experience/configure-tailwind-css-with-angular
谢谢，但我想避免安装一个工具来使用另一个工具
我可以在我的机器上复制它

标签： javascript angular webpack angular-cli tailwind-css

【解决方案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/

【讨论】：

您好，非常感谢您的回复！这解决了一个错误，但还剩下一个。我将在下一条评论中发布它
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??ref--17!./src/styles.scss) Module build failed (from ./node_modules/postcss-loader/dist/cjs.js): Error: Failed to find 'tailwind/base' in [ /.../my-app/src ] at /.../my-app/node_modules/postcss-import/lib/resolve-id.js:35:13
但正如我在问题中提到的，我在styles.scss 文件中导入tailwind/base
我也在另一台新安装的机器上测试过，我得到了同样的错误
您好，感谢您的回答。它解决了我的问题。但是 CSS 在网站上不起作用。

【解决方案2】：

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

除了问题/答案中已经突出显示的内容之外的一些关键点：

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

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

【讨论】：

假设项目是 scss - 对我来说使用 postcss v8.x 有效，我不需要其他步骤。
我一直在寻找解决方案几个小时，你的第三步救了我，谢谢！

【解决方案3】：

导入是 'tailwindcss'，而不是 'tailwind'：

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

【讨论】：

【解决方案4】：

安装 TailwindCSS（Angular 版本

如果您的 Angular 版本大于等于 11.2.0，则可以跳过此部分

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

第一步是在您的 Angular 项目中运行以下原理图：ng add @ngneat/tailwind
当询问您是否要启用暗模式时，请选择 class
当被问及是否希望在组件样式中使用 Tailwind 指令和函数时？选择Yes
当询问您要启用哪些 TailwindCSS 插件时，请选择 forms 和 typography 或全部。这取决于你。

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

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

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

-将新的 dark 类添加到您的 index.html 正文元素中

<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

【讨论】：

鉴于 dev.to 文章的作者是 "Pato"，他说他们是“谷歌 Angular 和 Web 技术开发专家”，而这个答案的作者简介 (Patricio) 说他们是“谷歌开发者Angular 和 Web 技术专家”，我倾向于相信这是同一个人，只是需要更直接地披露这一事实。