不使用Vite的Vue3项目能否接入TailwindCSS？PostCSS8报错如何解决

问题解决方案 #

无需使用Vite，非Vite的Vue3项目完全可以正常接入TailwindCSS，你遇到的报错本质是Vue CLI 4.x内置PostCSS版本和你安装的PostCSS8不兼容导致的，可以按以下两种方案解决：

方案1：使用TailwindCSS PostCSS7兼容版本（无需升级Vue CLI，推荐优先使用）

• 先卸载当前已安装的相关依赖：

npm uninstall tailwindcss postcss autoprefixer

• 安装适配PostCSS7的TailwindCSS版本：

npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

• 执行配置生成命令，不会再出现PostCSS版本报错：

npx tailwindcss init -p

• 配置Tailwind内容扫描规则，修改生成的tailwind.config.js文件：

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

• 在项目全局CSS文件（一般为src/assets/main.css）中引入Tailwind样式层：

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

• 在src/main.js中引入该全局CSS文件，之后执行npm run serve即可正常加载Tailwind样式。

方案2：升级Vue CLI到5.x版本（适配原生PostCSS8）

Vue CLI 5.x版本内置支持PostCSS8，升级后可以直接使用官方最新版TailwindCSS，无需兼容包：

• 全局升级Vue CLI：

npm update -g @vue/cli

• 将项目内所有@vue/cli开头的依赖版本升级到5.x，之后重新安装依赖，再按流程安装最新版TailwindCSS、PostCSS8、autoprefixer即可正常使用。

内容的提问来源于stack exchange，提问作者d3LTa7