Tailwind预设编译报错：dynamic require of 'tailwindcss/plugin' is not supported

问题场景 #

我开发了一个UI组件库，其中创建了Tailwind预设并从入口文件导出，预设代码如下：

import { PresetsConfig } from "tailwindcss/types/config";
import twAnimate from "tailwindcss-animate";
import twScrollbar from "tailwind-scrollbar";

const preset = {
  darkMode: ["class", '[data-mode="dark"]'],
  safelist: [...],
  plugins: [twAnimate, twScrollbar],
  theme: {...},
} satisfies PresetsConfig;

export default preset;

使用tsup打包的配置如下：

import { defineConfig } from "tsup";

export default defineConfig({
  clean: true,
  dts: true,
  entry: ["src/index.ts"],
  outDir: "lib",
  format: ["cjs", "esm"],
  minify: true,
  treeshake: true,
  tsconfig: "tsconfig.json",
  splitting: true,
  sourcemap: false,
});

编译时出现报错：dynamic require of 'tailwindcss/plugin' is not supported

原因分析 #

错误源于tailwindcss-animate、tailwind-scrollbar这类Tailwind插件内部使用了动态require加载tailwindcss/plugin，而tsup在同时打包CJS/ESM格式、开启代码分割或tree-shaking时，默认的模块解析逻辑无法兼容这种动态导入方式。

解决方案 #

1. 关闭代码分割 #

tsup的splitting选项会将代码拆分为多个chunk，容易触发动态require的解析错误。修改配置关闭该选项：

import { defineConfig } from "tsup";

export default defineConfig({
  clean: true,
  dts: true,
  entry: ["src/index.ts"],
  outDir: "lib",
  format: ["cjs", "esm"],
  minify: true,
  treeshake: true,
  tsconfig: "tsconfig.json",
  splitting: false, // 关闭代码分割
  sourcemap: false,
});

2. 将Tailwind相关依赖标记为外部依赖 #

由于预设是供用户在自己的Tailwind配置中引入的，无需将Tailwind核心库及插件打包到组件库中，让用户自行安装这些依赖即可。修改tsup配置添加external选项：

import { defineConfig } from "tsup";

export default defineConfig({
  clean: true,
  dts: true,
  entry: ["src/index.ts"],
  outDir: "lib",
  format: ["cjs", "esm"],
  minify: true,
  treeshake: true,
  tsconfig: "tsconfig.json",
  splitting: true,
  sourcemap: false,
  external: ["tailwindcss", "tailwindcss/plugin", "tailwindcss-animate", "tailwind-scrollbar"],
});

同时在package.json中把这些依赖移到peerDependencies，提示用户需要安装：

{
  "peerDependencies": {
    "tailwindcss": "^3.0.0",
    "tailwindcss-animate": "^1.0.0",
    "tailwind-scrollbar": "^3.0.0"
  }
}

3. 调整Tree-shaking策略 #

如果不想关闭代码分割，可以尝试修改tree-shaking的模式，将默认的true（即module）改为smallest：

import { defineConfig } from "tsup";

export default defineConfig({
  clean: true,
  dts: true,
  entry: ["src/index.ts"],
  outDir: "lib",
  format: ["cjs", "esm"],
  minify: true,
  treeshake: "smallest", // 调整tree-shaking策略
  tsconfig: "tsconfig.json",
  splitting: true,
  sourcemap: false,
});

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