React TypeScript中prettier-plugin-tailwind报错求助

问题描述 #

使用prettier-plugin-tailwind格式化TailwindCSS代码时触发报错，提示无法从CommonJS模块中require ES模块格式的tailwind.config.js。已尝试将tailwind.config.js改为ES模块语法，但问题仍未解决。

报错信息 #

[error] require() of ES Module ..../frontend/tailwind.config.js from ..../frontend/node_modules/tailwind-classes-sorter/lib/index.js not supported.
[error] Instead change the require of tailwind.config.js in ..../frontend/node_modules/tailwind-classes-sorter/lib/index.js to a dynamic import() which is available in all CommonJS modules.

原配置文件 #

原tailwind.config.js #

/** @type {import('tailwindcss').Config} */
export default {
    content: ['./src/**/*.{js,jsx,ts,tsx}', './index.html'],
    theme: {
        extend: {
            gridTemplateRows: {
                '[auto,auto,1fr]': 'auto auto 1fr',
            },
        },
    },
    plugins: [require('@tailwindcss/forms'), require('@tailwindcss/aspect-ratio')],
};

Prettier配置（.prettierrc） #

{
    "bracketSameLine": true,
    "singleQuote": true,
    "printWidth": 100,
    "tabWidth": 4,
    "useTabs": true
}

修改后的tailwind.config.js #

import forms from '@tailwindcss/forms';
import aspectRatio from '@tailwindcss/aspect-ratio';

const config = {
    content: ['./src/**/*.{js,jsx,ts,tsx}', './index.html'],
    theme: {
        extend: {
            gridTemplateRows: {
                '[auto,auto,1fr]': 'auto auto 1fr',
            },
        },
    },
    plugins: [forms(), aspectRatio()],
};
export default config;

解决方法 #

• 切换回CommonJS格式配置：将tailwind.config.js改回module.exports形式，适配tailwind-classes-sorter的CommonJS加载方式：

  /** @type {import('tailwindcss').Config} */
  module.exports = {
      content: ['./src/**/*.{js,jsx,ts,tsx}', './index.html'],
      theme: {
          extend: {
              gridTemplateRows: {
                  '[auto,auto,1fr]': 'auto auto 1fr',
              },
          },
      },
      plugins: [require('@tailwindcss/forms'), require('@tailwindcss/aspect-ratio')],
  };
  

• 升级或替换格式化插件：当前报错源于tailwind-classes-sorter（prettier-plugin-tailwind的依赖）不支持ES模块加载，可尝试：

  1. 更新prettier-plugin-tailwind到最新版本，确认是否修复了ES模块兼容问题；
  2. 替换为官方维护的prettier-plugin-tailwindcss插件，该插件对ES模块的兼容性更完善。

• 统一ES模块配置链：若需保留ES模块格式，将Prettier配置改为ES模块形式（创建prettier.config.mjs）：

  export default {
      bracketSameLine: true,
      singleQuote: true,
      printWidth: 100,
      tabWidth: 4,
      useTabs: true,
      plugins: ['prettier-plugin-tailwind'],
  };
  

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