如何為新的 Angular 項目設置 Tailwind？

Question

我想使用 Tailwind CSS 創建一個新的 Angular 項目。 我當前的 CLI 版本是 10.1.1。 到目前為止我做過的事情：

• 使用ng new my-app創建一個新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$/中的test: /tailwind\\.scss$/ \\.scss$/）來限制postcss處理的scss文件。

到目前為止，看起來它正在工作。 🤞

Answer 3

進口是 'tailwindcss'，而不是 'tailwind'：

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

Answer 4

安裝 TailwindCSS（Angular 版本）

在我個人看來，在版本低於 11.2.0 的 Angular 應用程序中使用 TailwindCSS 的最簡單方法是使用@ngneat/tailwind npm 包。 我對它有很好的體驗（即插即用）。

1. 第一步是在你的 Angular 項目中運行以下示意圖： ng add @ngneat/tailwind

2. 當詢問您是否要啟用暗模式時，請選擇class

3. 當被問及您是否願意在組件樣式中使用 Tailwind 指令和函數時？ 選擇Yes

4. 當被問及您要啟用哪些 TailwindCSS 插件時，請選擇forms和typography或全部。 隨你（由你決定。

在我們的 Angular 應用程序中安裝 TailwindCSS 后，我們需要關注 4 個部分。

- 一個新文件創建了tailwind.config.js它應該是這樣的

- 一個新文件創建的webpack.config.js它應該是這樣的

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

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

- 一些導入添加到你的styles.scss文件

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

注意：要在您的生產版本中打開清除，請遵循這條小推文

可選的

看看我的朋友 Beeman 制作的這個驚人的視頻。 它會在 3 分鍾內向您展示如何在 Angular 中使用 TailwindCSS！

如果你想學習如何在 Angular 11.2.0 中做到這一點

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