Vite构建React项目使用tailwindcss

安装tailwindcss依赖项，然后生成文件。

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

将 Tailwind 指令添加到你的 CSS

我这里直接使用了index.css文件 如果想重新创建文件 请在main.js引入

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

如果提示Unknown

在设置中搜索unk，Unknown At Rules设置选项中 选择ignore 默认为warning

配置模板路径

在tailwind.config.js文件替换一下代码

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

vscode添加tailwindcss代码提示

安装Tailwind CSS IntelliSense插件即可