如何在Tailwind配置文件中正确导入ES模块插件？

你遇到的问题是因为Tailwind配置文件用CommonJS语法（require/module.exports），但自定义插件用了ES6模块语法（import/export），Node.js无法直接混合解析这两种模块规范，所以触发了语法错误。下面是三种可行的解决办法：

方法一：将Tailwind配置改为ES模块格式 #

把tailwind.config.js重命名为tailwind.config.mjs，然后修改导入和导出语法：

import myPlugin from './my-plugin';

export default {
    mode: 'jit',
    darkMode: 'class',
    content: [
        './pages/**/*.{js,ts,jsx,tsx}',
        './components/**/*.{js,ts,jsx,tsx}',
    ],
    theme: {},   
    plugins: [
        myPlugin(),       
    ],
};

这样配置文件和插件都用ES6模块语法，解析就不会有冲突了。

方法二：将自定义插件改为CommonJS格式 #

修改./my-plugin.js的语法，把ES6模块语句换成CommonJS：

// 把 import ... from ... 改成 require
const someModule = require('some-module');

const MyPlugin = () => {}

module.exports = MyPlugin;

之后Tailwind配置文件可以继续用原来的require导入，无需修改。

方法三：全局设置项目为ES模块（Node.js 14+） #

在项目根目录的package.json中添加"type": "module"：

{
  "type": "module"
}

这会让Node.js把所有.js文件当作ES模块处理，此时Tailwind配置文件需要改成ES语法：

import myPlugin from './my-plugin';

export default {
    // 配置内容不变
};

注意：如果项目里还有其他用CommonJS写的文件，需要把它们的后缀改成.cjs，否则会触发同样的语法错误。

另外，你的原tailwind.config.js里theme: {}后面少了一个逗号，记得补上，否则也会导致语法错误。

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