vite5.0 React 配置tailwindcss

在Vite + React项目中 怎么配置tailwindcss，大家有的时候会出不来，在这里我给大家梳理一下怎么能保证可以使用tailwindcss；请按以下步骤操作

1. 我们先创建项目

pnpm create vite my-project -- --template react
cd my-project

2. 然后安装依赖

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

3. 在tailwindcss.config.js中配置

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

4. 在postcss.config.js中配置

export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

5. 随后在src/styles文件夹下创建tailwind.css或者在index.scss文件内写入

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

6. 在main.tsx入口文件引入上面第五步创建的tailwind.css或者index.scss即可

import React from "react";
import ReactDOM from "react-dom/client";
import { RouterProvider } from "react-router-dom";
import { router } from "./router";
import "./styles/index.scss";

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>
);

配置目录

以下是测试

• 测试代码

• 测试效果

不对之处请多多评论，指出错误，谢谢大家！