使用 Angular 安装 Tailwind CSS - Tailwind CSS 中文

我们正在招聘设计工程师 + 软件工程师

入门
使用 Angular 安装 Tailwind CSS

创建项目
如果您还没有设置 Angular 项目，请先创建一个新的项目。最常见的方法是使用 Angular CLI。
终端
```
ng new my-projectcd my-project
```
安装 Tailwind CSS
通过 npm 安装 tailwindcss，然后运行 init 命令生成 tailwind.config.js 文件。
终端
```
npm install -D tailwindcss postcss autoprefixernpx tailwindcss init
```

配置模板路径

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

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{html,ts}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

在 CSS 中添加 Tailwind 指令
在 ./src/styles.css 文件中为 Tailwind 的每个层添加 @tailwind 指令。
styles.css
```
@tailwind base;
@tailwind components;
@tailwind utilities;
```
开始构建过程
使用 ng serve 运行构建过程。
终端
```
ng serve
```
在项目中开始使用 Tailwind
开始使用 Tailwind 的实用程序类来为您的内容设置样式。
app.component.html
```
<h1 class="text-3xl font-bold underline">
  Hello world!
</h1>
```