Tailwind CSS 主页
  1. 安装
  2. 使用 Create React App 安装 Tailwind CSS

Create React App 不支持自定义 PostCSS 配置，并且与 PostCSS 生态系统中的许多重要工具不兼容，例如 `postcss-import`。

我们强烈建议使用 Vite、Parcel、Next.js 或 Remix 而不是 Create React App。它们提供等效或更好的开发体验，但更灵活，让您对 Tailwind 和 PostCSS 的配置有更多控制。

  1. 创建您的项目

    如果您还没有设置，请使用 Create React App v5.0+ 创建一个新的 React 项目。

    终端
    npx create-react-app my-projectcd my-project

  2. 安装 Tailwind CSS

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

    终端
    npm install -D tailwindcssnpx tailwindcss init

  3. 配置您的模板路径

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

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

  4. 将 Tailwind 指令添加到您的 CSS

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

    index.css
    @tailwind base;
@tailwind components;
@tailwind utilities;

  5. 启动您的构建过程

    使用 npm run start 运行您的构建过程。

    终端
    npm run start

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

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

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