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

问题描述

我想使用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 =>建筑师=>服务
- 将构建器更改为"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 ??嵌入！./ 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具有未知的属性“ 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）：ValidationError：无效选项对象。已使用选项初始化PostCSS Loader 与API模式不匹配的对象。

与上面相同的文字

如何正确设置Tailwind？

解决方法

今天我到处都head着脑袋，将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/

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

问题/答案中已突出显示的一些关键点：

需要显式安装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文件。

到目前为止，它似乎正在运行。 ?

导入是“ tailwindcss”，而不是“ tailwind”：

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

, 安装 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 tailwind

在我们的 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';

注意：要在您的生产版本中打开清除，请关注这条微博

可选

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

如果你想学习如何在 Angular 11.2.0 中做到这一点

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

angular angular-cli javascript tailwind-css webpack webpack

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

问题描述

解决方法

相关问答