如何在 Angular 项目中添加 TailwindCSS-JavaScript中文网-JavaScript教程资源分享门户

TailwindCSS 是一种基于 utility-first 的 CSS 框架，它通过提供大量预定义的 class 来简化 CSS 开发，让前端开发者更专注于业务逻辑的实现。本文将介绍如何在 Angular 项目中集成 TailwindCSS。

步骤一：安装 TailwindCSS

要使用 TailwindCSS，首先需要在项目中安装它。您可以使用 npm 或 yarn 来安装 TailwindCSS，如下所示：

npm install tailwindcss

或

yarn add tailwindcss

步骤二：配置 TailwindCSS

在项目中安装 TailwindCSS 后，下一步就是配置它。您可以使用 ng generate 命令生成一个新的 Angular 组件，打开 component.scss 文件，添加以下代码：

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

这行代码告诉 TailwindCSS 在组件中启用所有基本的、组件和效用 CSS。然后，您需要在项目的根目录中创建一个 tailwind.config.js 文件，并添加以下配置：

-- -------------------- ---- -------
-------------- - -
  ------ ---
  --------- ------ -- -- ------- -- -------
  ------ -
    ------- ---
  --
  --------- -
    ------- ---
  --
  -------- ---
-

在 purge 属性中，您可以指定应该为生产环境 tree shake 的 CSS 文件列表。在 theme 属性中，您可以定义自己的扩展样式。在 variants 属性中，您可以定义在不同状态（如 hover、active）下应用的 CSSclass 变体。

步骤三：运行 TailwindCSS

完成了 TailwindCSS 的配置后，现在您可以在项目中使用它了。启动 Angular 开发服务器，并运行以下命令，使用 TailwindCSS 编译项目中的 CSS 文件：

npx tailwindcss-cli@latest build -o ./src/styles.css

在集成 TailwindCSS 后，您可以在组件中使用 TailwindCSS 的 class，如下所示：

<div class="bg-gray-100 p-4">
    <p class="text-gray-800 font-semibold">Hello TailwindCSS from Angular!</p>
</div>

总结

通过遵循这些简单的步骤，您可以在 Angular 项目中集成 TailwindCSS。这样，您将能够更快、更准确地编写CSS，并使您的 CSS 更容易维护和改进。希望这篇文章可以作为一个参考，帮助您在将来的项目中更好地使用TailwindCSS。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6480405448841e9894fbd59e