在前端开发中，使用 CSS 框架可以帮助我们快速构建页面，提高开发效率。Tailwind CSS 是一款目前增长迅速的 CSS 框架，它提供了一系列实用的 UI 组件和 CSS 类，可以轻松实现自定义样式和快速开发。本文将详细介绍如何在 Angular 项目中使用 Tailwind CSS，以及一些常见的使用技巧。
安装 Tailwind CSS
首先，需要使用 npm 或 yarn 安装 Tailwind CSS 和它的依赖：
npm install tailwindcss postcss autoprefixer
配置 Tailwind CSS
在项目根目录下创建一个名为 tailwind.config.js 的文件，用于配置 Tailwind CSS。在其中添加以下代码：
-- -------------------- ---- -------
-------------- - -
------ -------------------------
--------- ------ -- -- ------- -- -------
------ -
------- ---
--
--------- -
------- ---
--
-------- ---
--上述代码中：
purge是 purgecss，用于去除未使用的 CSS，加快页面加载速度。这里配置了需要从哪些文件中提取使用的 CSS 类。darkMode表示是否启用深色模式。theme中可以扩展配置主题变量，例如字体大小、颜色、边距等。variants中可以扩展配置 CSS 类型，例如 hover、focus 等。plugins中可以引入第三方插件，例如自动生成序列化类名。
在 styles.css 文件中引入 Tailwind CSS：
@tailwind base; @tailwind components; @tailwind utilities;
以上代码将 Tailwind CSS 中的基础类、组件和实用类添加到样式文件中，这样我们就可以在项目中使用它们了。
在 Angular 中使用 Tailwind CSS
全局安装
通过在 angular.json 中的 styles 中引入 CSS 文件，将 Tailwind CSS 添加到你的 Angular 项目中：
"styles": [ "src/styles.css", "../node_modules/tailwindcss/dist/tailwind.min.css" ],
这种方式将在整个项目中应用 Tailwind CSS。
局部安装
如果你想维护多个版本的 Tailwind CSS，或者只想在某些组件中使用它，可以使用局部安装。以下是步骤：
在项目根目录下，创建
tailwind.config.js文件，配置 Tailwind CSS。在局部组件中安装 Tailwind CSS：
npm install tailwindcss postcss autoprefixer
在
.angular-cli.json文件中 ，添加 Tailwind CSS 的构建脚本，这样可以使 Tailwind CSS 应用到当前组件。"styles": [ "styles.css" ], "scripts": [ "../node_modules/.bin/tailwind build ./src/app/my-component/my-component.component.css -o ./src/app/my-component/my-component-tailwind.css" ]
解释以下以上配置含义：
styles配置中的styles.css是全局 CSS 样式文件，不需要添加。scripts中指定了 Tailwind CSS 的构建脚本：../node_modules/.bin/tailwind是指向 Tailwind CSS 命令工具的路径。build ./src/app/my-component/my-component.component.css指定了要编译的组件 CSS 文件。-o ./src/app/my-component/my-component-tailwind.css指定了生成的 Tailwind CSS 文件路径和名称。
在组件中引入生成后的 Tailwind CSS 文件：
.button { @import './my-component-tailwind.css'; @apply bg-blue-500 text-white font-bold py-2 px-4 rounded; }这样就可以在该组件中使用 Tailwind CSS 了。
使用 PostCSS 更好的支持 Tailwind CSS
根据最佳实践，建议使用 PostCSS 来操作 Tailwind CSS。PostCSS 是一款优秀的 CSS 编译工具，支持扩展、自动前缀等功能，可以更好地支持 Tailwind CSS 的使用。
安装 PostCSS 及其插件：
npm install postcss postcss-cli postcss-import postcss-loader postcss-nested postcss-preset-env tailwindcss
新建一个名为
postcss.config.js的文件，添加以下代码：-- -------------------- ---- ------- -------------- - - -------- - ----------------------- ------------------------------- -- --------------- ------- -- ------ -- --------- - ---------------- ----- -- --- -------------------------- -------------------------- -- --更新
angular.json中的styles配置，指向 TypeScript 文件：-- -------------------- ---- ------- --------- - - -------- ----------------- ------------- ------------- --------- ------ -- - -------- ------------------ ------------- -------------- --------- ------ - --设置在 Angular CLI 构建时使用 PostCSS:
-- -------------------- ---- ------- ---------- ---------------------------------------- ---------- - ------------- --------------------------- -------- ----------------- ------- -------------- ------------ ------------------- ----------- ------------------------ --------- - ------------- ----------------- -- --------- - ----------------- -- ---------- --- --------------------------- - --------------- ------------------ - -- ----------------- - ------------- - ------------------- - - ---------- ---------------------------------- ------- -------------------------------------- - -- --------------- ----- ---------------- ------ ------------ ------ -------------- ------ ------------------ ----- -------------- ------ ----------------- ----- ---------- - - ------- ---------- ----------------- ------ --------------- ----- -- - ------- -------------------- ----------------- ------ --------------- ------ - -- ---------- - ---------- - ----------------- --- --------------- --- -------------- --- ----------------- -- - - - -这里使用
postcss-import,autoprefixer,tailwindcss,postcss-nested来自动化地处理 CSS 文件。
Tips
集成 Angular Material
如果项目已经使用了 Angular Material，那么可以将 Tailwind CSS 和 Angular Material 集成在一起，以达到更好的效果。
例如，在局部样式文件中将按钮类用 Tailwind CSS 和 Angular Material 样式结合起来：
-- -------------------- ---- -------
-- ------------------------ --
------- -----------------------------
------- ---------- --- -------
------- -
-------- -----------------
----------- ------------
------ --------
------------ -----
-------------- ----
------- ----- --- --------
---
------ --------- ------- ----------
-通过这种方式，可以使组件更统一的基于 Angular Material 构建，并且可以通过 Tailwind CSS 快速自定义样式。
快捷键使用模板和样式
在 Angular 项目中，我们需要手动创建许多模板和样式文件，这样会耗费大量时间。所以，我们推荐使用 Angular Console 插件，它可以帮助减少编码过程中的重复工作。
使用 Angular Console 创建组件时，可以快捷创建相应的 HTML 模板和 CSS 样式：
这样开发效率就大大提高了。
总结
本文中我们详细讲解了如何在 Angular 中使用 Tailwind CSS，并附上了示例代码。通过使用 Tailwind CSS，可以在项目中快速开发、快速自定义样式，减少重复工作，提高工作效率。我们也提到了一些技巧和建议，供大家参考。如果你使用 Angular 开发，用 Tailwind CSS 和 Angular 超级简单！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f57369f6b2d6eab3e2a52a