React项目引入Tailwind CSS

在 React 项目中引入 Tailwind CSS，可以按照以下步骤进行设置：

1. 创建 React 项目

如果你还没有创建 React 项目，可以通过以下命令创建一个新的 React 项目：

1 2	npx create-react-app my-app cd my-app

2. 安装 Tailwind CSS

在项目的根目录下执行以下命令来安装 Tailwind CSS 及其所需的依赖项：

1 2	npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p

这将创建 tailwind.config.js 和 postcss.config.js 文件。

3. 配置 Tailwind CSS

在 tailwind.config.js 文件中，设置 Tailwind CSS 的内容路径，以便 Tailwind 可以进行树摇（Tree-shaking）以删除未使用的样式：

module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

4. 引入 Tailwind CSS

在 src 目录下的 index.css 文件中，引入 Tailwind 的基本样式：

1
2
3

@tailwind base;
@tailwind components;
@tailwind utilities;

5. 使用 Tailwind CSS 类

现在，你可以在 React 组件中使用 Tailwind CSS 类，例如：

function App() {
  return (
    <div className="text-center bg-blue-500 p-4">
      <h1 className="text-white text-2xl">Hello, Tailwind CSS!</h1>
    </div>
  );
}

export default App;

6. 运行项目

完成配置后，可以通过以下命令启动开发服务器并查看效果：

npm start

这样，你的 React 项目就成功引入了 Tailwind CSS，可以开始使用其实用类来快速构建样式。