在Angular中使用TailwindCSS

发表于 更新于 分类于 阅读次数： 本文字数： 2.2k 阅读时长 ≈ 2 分钟

1. 前言

本文主要讲述如何在 Angular 项目中设置 Tailwind CSS。

2. 创建 Angular 项目

如果您还没有设置一个新的 Angular 项目，请首先创建一个新的 Angular 项目。 最常见的方法是使用 Angular CLI, 具体细节请参考鹏叔的技术博客 - 创建 Angular 项目

1
2
ng new my-project
cd my-project

3. 安装 Tailwind CSS

通过 npm 安装 tailwindcss，然后运行 init 命令生成 tailwind.config.js 文件。

1
2
3
4

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

4. 配置您的 html 模板路径

配置您的模板路径
在 tailwind.config.js 文件中添加所有模板文件的路径。

1
2
3
4
5
6
7
8
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,ts}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

5. 将 Tailwind 指令添加到您的 CSS 中

将 Tailwind 每个层的 @tailwind 指令添加到 ./src/styles.css 文件中。

1
2
3
@tailwind base;
@tailwind components;
@tailwind utilities;

6. 构建 Angular

使用 终端中使用ng serve 运行构建过程。

1
2
3

ng serve

7. 开始在您的项目中使用 Tailwind

开始使用 Tailwind 的实用程序类来设计您的内容。

1
<h1 class="text-3xl font-bold underline">Hello world!</h1>

8. 插件和配置设置

插件和配置设置，可以改善开发人员在使用 Tailwind CSS 时的体验。

8.1. 语法支持

Tailwind CSS 在@Tailwind、@apply 和@screen 等规则中使用了大量自定义 CSS，在许多编辑器中，这可能会在无法识别这些规则的 IDE 下触发警告或错误。
解决方案几乎是为编辑器/IDE 安装一个插件，以支持 PostCSS 语言，而不是常规 CSS。

如果你使用的是 VS Code，官方 Tailwind CSS IntelliSense 插件包括一个专用的 TailwindCSS 语言模式，该模式支持 Tailwind 使用的所有自定义 at-rules 和 functions。

在某些情况下，如果编辑器对 CSS 文件中的语法要求非常严格，则可能需要禁用原生 CSS linting/validation。

8.2. IntelliSense for VS Code

官方 Tailwind CSS IntelliSense VS Code 扩展为用户提供了自动完成、语法高亮显示和 linting 等高级功能，从而增强了 Tailwind 的开发体验。

Autocomplete: 对类名以及 CSS 函数和指令的智能建议。
Linting: 突出显示 CSS 和标记中的错误和潜在错误。
Hover Previews: 将鼠标悬停在 Tailwind 类名上，查看完整的 CSS。
Syntax Highlighting: 提供语法定义，以便正确高亮显示 Tailwind 功能。

在GitHub 上查看该项目以了解更多信息，或将其添加到 Visual Studio Code 中以立即开始。

8.3. 自动 class 排序

我们为 Tailwind CSS 维护了一个官方的 Prettier 插件，它会按照我们推荐的类顺序自动对您的类进行排序。

该插件能与定制的 Tailwind 配置无缝配合，因为它只是一个 Prettier 插件，所以它可以在 Prettier 工作的任何地方工作——包括所有流行的编辑器和 IDE，当然也可以在命令行上工作。

查看GitHub 上的插件，了解更多信息并开始使用。

8.3.1. 安装 prettier-plugin-tailwindcss

Tailwind CSS v3.0+ 的 Prettier 插件，可根据我们推荐的类顺序自动对类进行排序。

只需安装 prettier-plugin-tailwindcss 作为开发依赖项：

1
2
3

npm install -D prettier prettier-plugin-tailwindcss

9. Angular 系列文章

最新更新以及更多 Angular 相关文章请访问 Angular 合集 | 鹏叔的技术博客

10. 参考文档

Install Tailwind CSS with Angular

Modern CSS in Angular: Layouts