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

我正在尝试将 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>

答案＃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"
"autoprefixer"："^10.1.0"
"@angular-builders/custom-webpack": "^11.0.0-beta.4"

答案＃2

ngneat/tailwind 对 Angular v11.2.0 及以上版本不起作用。Webpack 无法加载 tailwind，因此样式不会被应用。这在累计上浪费了我们团队 12 小时以上的时间，因为在 npm 中 angular 版本被设置为 "~11.2.0"，而团队中的一位成员本地缓存了 "11.1.x"，因此 npm 选择了较低的版本，并且基于 ngneat 的设置可以正常工作，给人一种错误的印象，即 ngneat 能在 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.0 或使用更新的版本（如果有的话）

在工作区或项目根目录中创建一个 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[.css] 而不是 SCSS[.scss]，你的文件应该是这样的：

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

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

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