prettier-plugin-tailwindcss类排序不稳定及twMerge冲突问题求助

核心方案：强制自定义类排序优先级 #

prettier-plugin-tailwindcss支持通过配置自定义类分组顺序，让text-*类始终排在leading-*类之前，从根源解决排序随机问题。

在项目根目录的prettier.config.js中添加如下配置：

module.exports = {
  plugins: ['prettier-plugin-tailwindcss'],
  tailwindcss: {
    classGroups: {
      // 单独定义font-size和line-height分组
      'font-size': ['text-*'],
      'line-height': ['leading-*'],
      // 指定分组顺序，font-size优先级高于line-height
      order: [
        'font-size',
        'line-height',
        // 保留其他默认分组，可参考插件默认分组顺序
        'position',
        'inset',
        'z-index',
        // ...其他默认分组
      ]
    }
  }
};

配置完成后，插件会严格按照定义的分组顺序排列类名，text-5xl会固定排在leading-14前面，同时避免ESLint Prettier规则报错。

辅助检查项 #

• 确认项目中没有其他冲突的ESLint排序规则（比如自定义的tailwindcss/class-order规则），这类规则会覆盖prettier-plugin-tailwindcss的排序逻辑，需禁用。
• 验证tailwind.config.js中没有对text-*或leading-*类的自定义修改，避免插件识别异常。

兜底方案（非根源解决） #

如果自定义排序暂时不生效，可临时调整twMerge的冲突组，避免text-*的行高覆盖leading-*：

// 示例：在twMerge配置中修改冲突组
import { extendTailwindMerge } from 'tailwind-merge';

const twMerge = extendTailwindMerge({
  conflictingClassGroups: {
    'font-size': [] // 移除font-size类与line-height的冲突关系
  }
});

但此方法仅解决覆盖问题，无法根治排序不稳定，建议优先使用自定义类排序方案。

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