Tailwindcss 2 样式在 Angular 11 中不起作用

Question

我正在尝试将 Tailwindcss 用于一个新的 Angular 11 项目。我安装了以下开发包。

NOTE: Removed other packages for simplicity
"@angular-builders/custom-webpack": "^10.0.1",
"@angular-devkit/build-angular": "~0.1100.2",
"@angular/cli": "~11.0.2",
"@angular/compiler-cli": "~11.0.1",
"autoprefixer": "^10.0.2",
"postcss-import": "^13.0.0",
"postcss-loader": "^4.1.0",
"postcss-scss": "^3.0.4",
"tailwindcss": "^2.0.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')
            ]
          }
        }
      }
    ]
  }
}

style.scss

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

angular.json

"builder": "@angular-builders/custom-webpack:browser", //dev-server
"customWebpackConfig": { "path": "webpack.config.js" }

我将此代码添加到app.component.html，但它似乎无法识别样式。

...... some codes not included
<div class="px-6 pb-4 space-x-2">
    <a href="https://angular.io" target="_blank" rel="noreferrer"
      class="inline-block bg-red-500 rounded-full px-3 py-1 text-sm font-semibold text-white hover:bg-red-700">
      #angular
    </a>
    <a href="https://tailwindcss.com" target="_blank" rel="noreferrer"
      class="inline-block bg-indigo-500 rounded-full px-3 py-1 text-sm font-semibold text-white hover:bg-indigo-700">
      #tailwind
    </a>
    <a href="https://notiz.dev" target="_blank" rel="noreferrer"
      class="inline-block bg-blue-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 hover:bg-blue-400">
      #notiz
    </a>
  </div>

Answer 1

您可以更新到测试版 @angular-builders/custom-webpack。它在您的 angular.json 中有新的变化，部分 customWebpackConfig 现在应该是这样的

 "customWebpackConfig": {
      "path": "./webpack.config.js",
      "mergeRules": {
           "module": {
              "rules": "append"
            }
      }
  }

你的加载器应该是 webpack.config.js

let sass;
try {
  sass= require('node-sass');
} catch {
  sass= require('sass');
}

module.exports = {
  node: {
    fs: 'empty'
  },
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                ident: 'postcss',
                syntax: 'postcss-scss',
                plugins: [
                  "postcss-import",
                  "tailwindcss",
                  "autoprefixer"
                ]
              }
            }
          },
          {
            loader: 'sass-loader',
            options: {
              implementation: sass,
              sourceMap: false,
              sassOptions: {
                precision: 8
              }
            }
          }
        ]
      }
    ]
  }
};

您可以在 angular-builders 上阅读更多相关信息

还有你需要的包

• “postcss”：“^8.2.1”
• “postcss-import”：“^14.0.0”
• “postcss-loader”：“^4.1.0”
• “postcss-scss”：“^3.0.4”
• “tailwindcss”：“^2.0.2”
• “自动前缀”：“^10.1.0”
• "@angular-builders/custom-webpack": "^11.0.0-beta.4"

Answer 2

我认为 webpack 的版本与 angular 11 不兼容

https://www.npmjs.com/package/@angular-builders/custom-webpack

Answer 3

ngneat/tailwind 不适用于 Angular v11.2.0 及更高版本。 Webpack 不会加载顺风，因此不会应用样式。这有点浪费了我们团队的 12 多个小时，因为在 npm 中，角度版本设置为“~11.2.0”，并且团队成员之一有“11.1.x”的本地缓存，因此 npm 选择了较低的版本并基于 ngneat 的设置工作正常，给人一种错误的印象，认为 ng quiet 适用于 11.2.0，问题出在我们自己的设置上。

经过这次考验，确认“安装的实际软件包版本”的想法得到了重新实施。

使用npm install -D tailwindcss安装

安装 TailwindCSS 插件（可选）：

npm i @tailwindcss/typography

npm i @tailwindcss/forms

有些人正在运行旧版本的 CLI 或 @angular-devkit/build-angular。确保您的 package.json 看起来至少与 11.2.0this 版本或更新版本（如果有）

在工作区或项目根目录中创建 TailwindCSS 配置文件。将该配置文件命名为tailwind.config.js 它应该是这样的：

module.exports = {
    prefix: '',
    purge: {
      content: [
        './src/**/*.{html,ts}',
      ]
    },
    darkMode: 'class', // or 'media' or 'class'
    theme: {
      extend: {},
    },
    variants: {
      extend: {},
    },
    plugins: [require('@tailwindcss/forms'),require('@tailwindcss/typography')],
};

在您的 styles.scss 文件中添加以下 TailwindCSS 导入

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

如果您使用的是 CSS 而不是 SCSS，您的文件应如下所示：

@tailwind base;
@tailwind components;
@tailwind utilities;

我从这里这个人的一篇精彩文章中摘录了这个：

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