在 Angular 中轻松设置 TailwindCSS

2025-05-24

在 Angular 中轻松设置 TailwindCSS

在本教程中，我将向您展示如何以 EZ EZ 方式将 TailwindCSS 集成到您的 Angular 项目中。

本教程适用于想要在其 Angular 应用程序中使用新发布版本11.2.0（现在附带对 TailwindCSS 的原生支持😉）或旧版本的用户。

您可以跳过💩直接进入安装步骤

内容

  • 什么是 TailwindCSS？
  • TailwindCSS 如何工作？
  • TailwindCSS 的优势
  • TailwindCSS 的缺点
  • 安装 TailwindCSS (Angular 版本 < 11.2.0)
  • 安装 TailwindCSS（Angular 版本 >= 11.2.0）
  • 确保 TailwindCSS 在 Angular 中正常工作
  • 在 Angular 产品构建中清除 Tailwind

什么是 TailwindCSS？

“一个实用优先的 CSS 框架，包含诸如flex、、pt-4和text-center之类的类rotate-90，可以直接在你的标记中组合以构建任何设计。” - Tailwind 团队

TailwindCSS 如何工作？

TailwindCSS 与 Bootstrap 等其他 CSS 框架不同。它自带一组实用类（CSS 类）。您可以创建并组合这些类，从而赋予 UI 所需的外观。TailwindCSS 允许您以非常简单的方式自定义样式，从而创建您自己的设计系统。

TailwindCSS 的优势

  • 您将花费更多时间在业务逻辑上而不是 CSS 上
  • 预制的实用类可供使用
  • 您可以像添加任何 CSS 类一样添加它们的类
  • 生产重量轻
  • 移动优先
  • 可扩展、可定制
  • 以“老派”的方式使用它，将其样式应用到您的 CSS 类中
  • IDE 的扩展
  • 有据可查
  • 受到 Vue 和 React 等不同工具的良好支持
  • 您可以随时检查网站中的 TailwindCSS 类并查看实际的 CSS 代码 :)
  • 类的命名约定是有意义的，例如space-y-4它将在 HTML 元素之间添加 4 像素的垂直（Y 轴）空间。

TailwindCSS 的缺点

  • 如果你是 CSS 新手，我不建议你这么做，不是因为它难，而是因为它会让你变懒。有时你根本不需要写 CSS，只需要添加一些类即可。
  • 会使你的 HTML 变得非常脏乱。如果你在 HTML 元素中添加大量类，它很快就会变得丑陋！一个解决方案是使用 TailwindCSS 中的类来创建组件，这样你就可以清理你的 HTML。

安装 TailwindCSS（Angular 版本 < 11.2.0）

如果你的 Angular 版本大于或等于 11.2.0，则可以跳过此部分

我个人认为，在低于 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它应该看起来像这样
- 新的dark类已添加到您的index.htmlbody 元素

<body class="dark">
  <app-root></app-root>
</body>
Enter fullscreen mode Exit fullscreen mode

- 一些导入内容已添加到您的styles.scss文件中

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
Enter fullscreen mode Exit fullscreen mode

注意：要在生产版本中打开清除功能，请关注这条小推文

选修的

看看我朋友 Beeman 制作的这个精彩视频吧。它展示了如何在 3 分钟内将 TailwindCSS 在 Angular 中使用！

安装 TailwindCSS（Angular 版本 >= 11.2.0）

如果您的 Angular 版本低于 11.2.0，则可以跳过本节并查看上面的安装说明。如果您已经执行了前面的步骤，请转到Testing TailwindCSS in Angular下一节。

  1. 安装npm install -D tailwindcss

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

有些人正在运行旧版本的 CLI 或 @angular-devkit/build-angular。请确保您的 package.json 至少包含 11.2.0 版本，或者有更新的版本（如果有）。

  1. 在工作区或项目根目录中创建一个 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')],
};
Enter fullscreen mode Exit fullscreen mode
  1. 在您的styles.scss文件中添加以下TailwindCSS导入
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
Enter fullscreen mode Exit fullscreen mode

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

@tailwind base;
@tailwind components;
@tailwind utilities;
Enter fullscreen mode Exit fullscreen mode

确保 TailwindCSS 在 Angular 中正常工作

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

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

现在运行ng serve，你应该看到以下按钮

角度尾风

如果您不想在 HTML 中包含那么多类，则可以通过将 TailwindCSS 类放入 CSS/SCSS 文件中来清理它。

.btn {
    @apply py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-red-400
}
Enter fullscreen mode Exit fullscreen mode

** 注意我正在使用@apply **

<button class="btn">Hello</button>
Enter fullscreen mode Exit fullscreen mode

运行 Angular 11.2.0 和 Tailwind 的项目的Github Repo

如何在生产环境中清除 TailwindCSS

如果我们不清除 CSS，由于 TailwindCSS 为您添加了大量 CSS 类，我们的 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}',
      ]
    },
...
Enter fullscreen mode Exit fullscreen mode

B）tailwind.config.js file您可以在属性enabled中设置属性purgetrue

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

然后您可以运行ng build --prod，您将看到您的捆绑包变得越来越小。

清除之前
tailwindcss 清除

清除后
清除顺风

特别感谢：

ngneat/tailwind 包的贡献者：
Chau Tran
Beeman

以及这个出色的软件包的其他贡献者。

特别感谢 Angular Taiwan 的 GDE Kevin 帮助我调试问题
。Kevin

特别感谢 Vlad，他向我展示了清除技巧 :)
Vlad Tansky

文章来源：https://dev.to/angular/setup-tailwindcss-in-angular-the-easy-way-1i5l
Devto 翻译
PREV
使用 RxJS 在 Angular 中进行简单而强大的状态管理
NEXT
Angular 9：延迟加载组件