介绍
TailwindCSS 是一种基于原子化 CSS 的 CSS 框架，它的设计理念是提供一些小的 CSS 类来构建 UI，这些类与 HTML 标签结合使用，可以快速地构建丰富的 UI，而且不需编写任何 CSS。
在 Angular 项目中使用 TailwindCSS 可以提升开发效率与代码可维护性，本文将介绍在 Angular 项目中使用 TailwindCSS 的方法及技巧。
步骤
1. 安装 TailwindCSS
首先，安装 TailwindCSS，可以使用以下命令：
npm install tailwindcss
2. 创建配置文件
在项目的根目录下创建一个名为 tailwind.config.js 的文件，文件内容可以参考 TailwindCSS 的官网文档，例如：
-- -------------------- ---- -------
-------------- - -
------ ---
--------- ------ -- -- ------- -- -------
------ -
------- ---
--
--------- -
------- ---
--
-------- ---
-purge 用于去除无用的 CSS 代码，可以通过配置路径来指定哪些文件需要进行 CSS 代码优化。
3. 配置样式文件
在 styles.css 中引入 TailwindCSS 所需的样式文件，按以下顺序添加：
/* ./styles.css */ @tailwind base; @tailwind components; @tailwind utilities;
在 angular.json 中也要添加相应的 styles.css 路径，例如：
-- -------------------- ---- -------
-
----------- -
--------- -
------------ -
-------- -
---------- -
--------- -
----------------
-
-
--
-------- -
---------- -
--------- -
----------------
-
-
-
-
-
-
-4. 使用 TailwindCSS 样式类
现在就可以开始使用 TailwindCSS 提供的 CSS 类来构建 UI 了。在 HTML 元素上添加 CSS 类即可使用 TailwindCSS 提供的样式，例如：
<div class="w-full h-12 bg-gray-100 flex justify-center items-center"> <span class="text-gray-500 font-bold text-lg">Hello, TailwindCSS!</span> </div>
例如上述代码，使用 w-full 和 h-12 给元素设置宽度和高度，使用 bg-gray-100 给元素设置背景色，使用 flex 和 justify-center、 items-center 设置元素居中以及弹性盒子属性。
结论
使用 TailwindCSS 可以快速构建丰富的 UI，不需要编写任何 CSS，提高了开发效率。使用 TailwindCSS 需要遵循一些规则，只添加需要的样式，不添加多余的样式，这样可以保证代码的可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674bd5aed657e1f70dc0d17a