如何在 Angular 11.2.0 或更低版本中设置 TailwindCSS

Question

如您所知，Tailwind 是一个非常流行的 PostCSS 解决方案。我想在运行版本 11.2.0 或旧版本的 Angular 应用程序中添加 TailwindCSS。我怎样才能做到这一点？

我决定发布并回答我自己的问题，因为这是我最近在 Angular 社区看到的一个非常受欢迎的问题

Answer 1

在 Angular 11.2.0 中设置 TailwindCSS

1. 使用

   npm install -D tailwindcss

   安装

2. 安装TailwindCSS插件（可选）：

• npm i @tailwindcss/typography

• npm i @tailwindcss/forms

3. 在安装节点模块的工作空间或项目根目录中创建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')],
};

4. 在您的

   styles.scss

   文件中添加以下 TailwindCSS 导入

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

如果您使用 CSS 而不是 SCSS，您的导入应该如下所示：

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

确保 Angular 中的 TailwindCSS 正常工作

转到任意组件并写入以下内容：

<button
  class="py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-red-400">Hello</button>

现在运行

ng serve

，您应该看到以下按钮

如何在生产环境中清除 TailwindCSS

如果我们不清除，由于 TailwindCSS 为您添加的所有 CSS 类，我们的 CSS 可能会非常重。如果您清除，所有未使用的类都将被删除。

我想在 Angular 11.2.0 中进行清除的方法如下：

A）这是我的首选方式。将其添加到您的建筑脚本中

NODE_ENV=production ng build --prod

你的 tailwind.config.js 文件应该如下所示。

purge: {
      enabled: process.env.NODE_ENV === 'production',
      content: [
        './src/**/*.{html,ts}',
      ]
    },

B) 在

tailwind.config.js file

中，您可以将

enabled

属性内的

purge

属性设置为

true

。这将一直运行清除，请注意这一点。

....
prefix: '',
    purge: {
      enabled: true,
      content: [
        './src/**/*.{html,ts}',
      ]
    },
....

然后你可以运行

ng build --prod

，你会看到你的包变得越来越小。

清洗前

清洗后

要了解有关 Angular（11.2.0 或更早版本）与 TailwindCSS 的更多信息，请参阅我的文章

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