如何在Vite+Vue2项目中集成TailwindCSS并解决fs模块导入报错问题

报错的根本原因是你在Vite环境下安装了适配PostCSS7的Tailwind兼容版本，和Vite内置的PostCSS8版本冲突，导致依赖Node.js原生模块的PurgeCSS逻辑被错误打包到浏览器环境，而浏览器本身不提供fs、util等Node原生模块的实现，因此触发报错。

1. 清理冲突依赖 #

先卸载当前安装的不兼容依赖包：

npm uninstall tailwindcss @tailwindcss/postcss7-compat postcss autoprefixer

2. 安装匹配Vite的依赖版本 #

Vite内置PostCSS8，无需降级到PostCSS7，直接安装适配PostCSS8的TailwindCSS v3版本即可，该版本对Vue2无兼容问题：

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

3. 生成配置文件 #

在项目根目录执行命令，自动生成Tailwind和PostCSS的配置文件：

npx tailwindcss init -p

4. 配置Tailwind扫描路径 #

打开生成的tailwind.config.js，在content字段中添加项目文件路径，确保Tailwind能正确扫描到你用到的样式类名：

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

5. 调整样式引入逻辑 #

不要直接引入tailwindcss/tailwind.css，先在项目的全局CSS文件（比如src/style.css）中添加Tailwind指令：

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

随后在main.js中引入这个全局CSS文件即可：

import './style.css'

6. 重启开发服务 #

重新执行npm run dev启动项目，报错即可消除。

备选方案（仅当业务必须使用Tailwind v2时采用）
如果必须保留Tailwind v2版本，可在vite.config.js中添加如下配置，将purgecss标记为外部依赖，避免打包到浏览器侧：

export default {
  // 其他原有配置保持不变
  optimizeDeps: {
    exclude: ['purgecss']
  }
}

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