vue3+vite5，引入tailwindcss不生效的原因

背景：

在vue3+vite5项目中，安装官方文档引入tailwindcss发现不生效。

原因：

新版本的vite不需要创建scss样式文件，直接在main.js中导入import "tailwindcss/tailwind.css";就可以了，这个文件已经提供了基础配置。另外，对于vite4及以上版本，vite.config.js不需要对tailwind做任何配置，postcss插件vite内部会自动引入进行运行。

解决：

vue3+vite5，引入tailwindcss的步骤：

1. 安装：npm install -D tailwindcss postcss autoprefixer
2. 执行：npx tailwindcss init  创建 tailwind.config.js
3. tailwind.config.js配置如下

/** @type {import('tailwindcss').Config} */
export default {
  //配置tailwind的应用范围
  //在这里我们配置了tailwind应用到index.html文件和src目录下所有.vue和.js文件
  content: ["./index.html", "./src/**/*.{vue,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

    4. 在项目的根目录下创建postcss.config.js文件，并配置如下

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

    5. 在main.js中导入tailwind的基础样式

...
import "tailwindcss/tailwind.css";
...

   6.验证是否正确引入了tailwindcss

    在App.vue,将img标签的class设置为class='bg-red-900'和class='bg-orange-600'若页面中出现如下红色和橙色背景，则表示tailwindcss引入成功。