如何在 Angular v19.1 中配置 Tailwind CSS 4.0：分步指南

在本博客中，我将指导您如何在 Angular v19.1 项目中设置 Tailwind CSS 4.0，使您能够利用实用性优先的样式进行快速 UI 开发。

先决条件

在开始之前，请确保已安装 Angular CLI。如果没有安装，可以通过运行以下命令进行全局安装：

npm install -g @angular/cli

现在，让我们开始设置过程！

1. 创建你的 Angular 项目

如果您还没有 Angular 项目，让我们创建一个新的。我们将使用 Angular CLI，这是创建和管理 Angular 项目最高效的方式。

运行以下命令生成一个新的 Angular 项目：

ng new my-project --style css
cd my-project

此命令会创建一个新的 Angular 项目，并将 CSS 设置为默认样式选项。设置完成后，请导航到项目目录。

2. 配置 PostCSS 插件

接下来，我们需要配置 PostCSS，这是使用 Tailwind CSS 的必要条件。在 Angular 项目的根目录下，创建一个.postcssrc.json文件并添加该@tailwindcss/postcss插件。

以下是文件内容.postcssrc.json：

{
  "plugins": {
    "@tailwindcss/postcss": {}
  }
}

此配置可确保 PostCSS 使用 Tailwind CSS 插件处理您的样式。

3. 安装 Tailwind CSS 和 PostCSS

现在，我们来安装必要的依赖项。Tailwind CSS 依赖于 Tailwind 本身和 PostCSS 来处理样式。运行以下命令安装这些依赖项：

npm install tailwindcss @tailwindcss/postcss postcss --force

这将安装 Tailwind CSS、PostCSS 和 Autoprefixer（为 CSS 添加厂商前缀，以提高浏览器兼容性）。

4. 导入 Tailwind CSS

要将 Tailwind 集成到您的项目中，您需要将其导入到样式表中。打开该src/styles.css文件并添加以下导入语句：

@import "tailwindcss";

这将使 Tailwind 的所有实用类在您的项目中全局可用。

5. 开始构建过程

一切准备就绪，现在可以构建并运行你的 Angular 项目了。运行以下命令启动开发服务器：

ng serve

您的 Angular 项目现已集成 Tailwind CSS 并运行。打开浏览器并访问 [此处应填写网址]http://localhost:4200即可查看应用程序的实际效果。

6. 开始在你的项目中使用 Tailwind

您现在可以使用 Tailwind 的实用工具优先类来设置应用程序的样式了。例如，让我们使用 Tailwind 的实用工具来设置一个简单的标题元素的样式：

<h1 class="text-3xl font-bold underline text-center mt-10">
  Angular v19.1 + Tailwind CSS 4.0
</h1>

这将在您的网页上生成一个大号、粗体且带下划线的标题。

结论

将 Tailwind CSS 与 Angular v19.1 集成非常简单，它能让您以实用性优先的方式增强 UI 开发。借助 Tailwind 的类库，您可以轻松快捷地创建响应式、现代化的设计。

现在，您可以开始在整个应用程序中应用 Tailwind 的实用类，以加快开发过程并实现美观、一致的设计。

祝您编程愉快！

探索代码

访问GitHub 代码库以详细了解代码。