React+Craco环境下如何在TailwindCSS配置中引入ES模块？

方案1：使用Tailwind异步配置（推荐，适用于Tailwind v3.2及以上版本） #

Tailwind v3.2及以上版本原生支持接收异步函数返回的配置对象，无需修改项目模块规范或文件后缀：

1. 直接修改tailwind.config.js内容如下：

module.exports = (async () => {
  // 动态导入ESM格式的d3-color包
  const d3Colors = await import('d3-color');
  
  // 以下为你的原有Tailwind配置
  return {
    content: ["./src/**/*.{js,jsx,ts,tsx}"],
    theme: {
      extend: {
        colors: {
          // 示例：使用d3-color生成自定义色值
          primary: d3Colors.rgb(30, 136, 229).toString(),
          secondary: d3Colors.hsl(210, 80%, 50%).toString()
        }
      }
    },
    plugins: []
  };
})();

这个方案完全兼容Craco的CommonJS运行环境，不需要修改任何其他配置，也不会产生模块规范冲突。

方案2：使用esm桥接（适用于Tailwind版本低于v3.2的场景） #

如果你的项目使用的是旧版本Tailwind，不支持异步配置，可以用esm包做CommonJS到ESM的兼容桥接：

1. 安装esm为开发依赖：
   npm install esm --save-dev
   或
   yarn add esm --dev
2. 修改tailwind.config.js内容如下：

// 注入esm加载器，支持在CommonJS中引入ESM模块
require = require("esm")(module);
const d3Colors = require("d3-color");

module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {
      colors: {
        // 按需求使用d3-color的能力即可
        primary: d3Colors.rgb(30, 136, 229).toString()
      }
    }
  },
  plugins: []
};

之前的方案失效原因 #

• 直接在CommonJS格式的.js文件中使用顶层await不符合ES规范，所以会触发语法报错
• 修改配置文件后缀为.mjs后，Craco运行在CommonJS环境下，默认无法识别ESM格式的Tailwind配置
• 修改package.json的type为module会将整个项目的模块规范改为ESM，和基于CommonJS开发的Craco产生兼容性冲突

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