使用 Create React App 安装 Tailwind CSS

Create React App does not support custom PostCSS configurations and is incompatible with many important tools in the PostCSS ecosystem, like `postcss-import`.

We highly recommend using Vite, Parcel, Next.js, or Remix instead of Create React App. They provide an equivalent or better developer experience but with more flexibility, giving you more control over how Tailwind and PostCSS are configured.

创建你的项目
首先创建一个新的 React 项目，如果你还没有设置的话，可以使用Create React App v5.0+ 。
终端
```
npx create-react-app my-projectcd my-project
```
安装 Tailwind CSS
通过 npm 安装 tailwindcss，然后运行 init 命令来生成你的 tailwind.config.js 文件。
终端
```
npm install -D tailwindcss@3npx tailwindcss init
```

配置你的模板路径

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

tailwind.config.js

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

将 Tailwind 指令添加到你的 CSS 中
将 Tailwind 的每个层的 @tailwind 指令添加到你的 ./src/index.css 文件中。
index.css
```
@tailwind base;
@tailwind components;
@tailwind utilities;
```
开始构建流程
使用 npm run start 运行你的构建过程。
终端
```
npm run start
```

开始在你的项目中使用 Tailwind

开始使用 Tailwind 的工具类来为你的内容添加样式。

App.js

export default function App() {
  return (
    <h1 className="text-3xl font-bold underline">
      Hello world!
    </h1>
  )
}

创建你的项目

安装 Tailwind CSS

配置你的模板路径

将 Tailwind 指令添加到你的 CSS 中

开始构建流程

开始在你的项目中使用 Tailwind