Vite+React+TS项目Vercel部署时tailwind.config.js报错：require未定义

问题根源在于你的tailwind.config.js使用了ES模块的export default语法，但插件引入却用了CommonJS的require方法。本地开发环境通常对两种模块语法兼容度较高，但Vercel的Node运行环境在处理ES模块文件时，会严格限制require的使用，因此触发报错。

下面是两种可行的解决方法：

• 方法一：改用ES模块语法引入插件
  修改tailwind.config.js，使用import替代require：

  import tailwindcssAnimate from "tailwindcss-animate";
  
  export default {
      // ... 你的其他配置
      plugins: [tailwindcssAnimate],
  }
  

• 方法二：将配置文件改为CommonJS格式
  如果更习惯CommonJS语法，把export default替换为module.exports：

  module.exports = {
      // ... 你的其他配置
      plugins: [require("tailwindcss-animate")],
  }
  

两种方法都能解决部署报错问题，同时保留动画效果。推荐第一种方案，因为Vite项目本身默认采用ES模块规范，保持语法统一更符合项目整体架构。

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