Tailwind CSS 与 Angular V12：你需要知道的一切
Angular V12 带来了期待已久的对 TailwindCSS 的支持，Tailwind 是一个实用性优先的 CSS 框架，它包含一个丰富的微 CSS 类库，可以加快 UI 开发速度。
微型 CSS 类是一组 CSS 样式，用于满足特定的样式需求。它可以非常简单，例如：
.static {
position: static
}
更复杂一些，例如：
.inset-0 {
top: 0px;
right: 0px;
bottom: 0px;
left: 0px
}
Tailwind 没有 UI 工具包，在进行 UI 设计时也不依赖任何模式，这使得开发人员可以完全控制 UI 设计的实现方式。
为什么选择 Tailwind？
-
即时模式：虽然此功能仍在预览阶段，但 Tailwind 拥有一个即时编译器，可以根据需要生成样式。这可以加快构建速度，并在开发过程中提升浏览器性能。了解更多
-
深色模式：现代操作系统都支持浅色和深色模式，Tailwind 让您在启用深色模式时轻松设置不同的用户界面样式。了解更多
-
针对生产环境进行优化： Tailwind 通过移除未使用的类来优化最终样式包的大小，从而减小构建体积。了解更多
-
易于定制： Tailwind 提供了一系列指令和函数，进一步增强了您对框架的定制能力。了解更多
-
学习曲线更平缓：使用 Tailwind，您无需成为 CSS 专家。只需具备基本的 CSS 知识，即可利用其提供的各种实用类创建现代感十足的网页。
Tailwind 与其他 UI 框架的集成
是的，Tailwind 与其他框架（例如 Bootstrap、Angular Material 等）配合使用效果很好。但是，您可能会遇到一些问题，包括：
- 类名重叠：像 Bootstrap 这样的 UI 框架自带一系列实用类，这些类名可能与 Tailwind 的实用类名重叠。例如，类名 `<class name>`
mb-10同时存在于 Bootstrap 和 Tailwind 中。显然，在同一个项目中同时使用 Bootstrap 和 Tailwind 时，这会造成问题。
tailwind.config.js为了避免类名重叠，Tailwind 允许你在文件中为 tailwind 添加一个唯一的前缀。
// tailwind.config.js
module.exports = {
prefix: 'tw',
}
现在，在使用 Tailwind 类时，请确保包含添加的前缀。
<span class="tw-text-gray-800 tw-font-medium">Welcome</span>
- 移除 Tailwind 基础层 CSS 重置：默认情况下，Tailwind 会对页面执行 CSS 重置，从而规范化并移除浏览器的默认样式。这样做是为了消除跨浏览器的不一致性。当 Tailwind 与其他 CSS 框架一起使用时，这可能会导致设计问题，尤其是在现有项目中使用时。为避免这种情况，只需关闭 Tailwind 的预检层即可。这将确保不会执行 CSS 重置。
// tailwind.config.js
module.exports = {
corePlugins: {
preflight: false,
},
}
配置 TailwindCSS
TailwindCSS 的设计理念在于允许用户配置框架的每一个细节。您可以使用配置文件添加、删除或编辑 TailwindCSS，以满足您的特定需求。了解更多
带有角度的 Tailwind
随着 Angular 12 的发布，Tailwind 已完全获得 Angular 的支持，在 Angular 中设置 Tailwind 只需以下几个简单的步骤：
- 使用 npm 或 yarn 安装 TailwindCSS：在终端中运行此命令以安装 TailwindCSS
npm install -D tailwindcss
#or yarn
yarn add tailwindcss -D
- 生成 TailwindCSS 配置文件：在 Angular 项目的根目录下，在终端中运行以下命令，使用Tailwind CLI生成 Tailwind 配置文件。
npx tailwindcss init
tailwind.config.js为了获得最佳性能，请在您的文件中启用以下内容。
- 启用即时模式：这将启用即时模式，优化构建时间，并在开发过程中确保更好的浏览器性能。
module.exports = {
mode: 'jit',
purge: [
// ...
]
// ...
}
- 清除未使用的 CSS 样式：为确保 Tailwind 删除所有未使用的 CSS 类，请启用清除功能，并在您的文件中提供所有使用 Tailwind CSS 类的文件的路径
tailwind.config.js。这将生成更小的样式包。
module.exports = {
mode: 'jit',
purge: {
enabled: true,
content: ['./src/**/*.{html,ts}']
}
}
- 将 Tailwind 添加到您的全局样式文件中
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
要确认 TailwindCSS 是否正常工作，只需将此代码添加到任何组件的 html 文件中即可。
<button class="py-2 px-3 m-2 bg-blue-500 hover:bg-nav-hover-blue rounded-md text-white">Click Me!</button>
它应该看起来像上面的图片。如果您不喜欢在 HTML 标签中添加大量类，或者您计划在其他 HTML 标签中重复使用相同的样式，则可以使用 TailwindCSS@apply指令将所有类组合在一个调用中。它应该看起来像这样：
.tw-blue-btn {
// apply group style
@apply py-2 px-3 m-2;
@apply bg-blue-500 hover:bg-blue-700;
@apply rounded-md;
@apply text-white;
}
<button class="tw-blue-btn">Click Me!</button>
结语
Tailwind 是一款出色且易于使用的 CSS 框架，可用于快速开发 UI。它能够完美地应用于小型项目或企业级项目。无论您的 CSS 经验水平如何，您都可以轻松地从零开始创建独特而现代的 UI。
演示项目
Git：https
://github.com/ishedu/tailwind-angular 在线应用：https://tailwindcss-angular.web.app/
实用资源
Tailwind 官方文档、
Tailwind 实用工具
、Tailwind 速查表