tailwind-merge不能排序，只做语义覆盖：同一属性组（如p-、text-）保留最后一个有效类，如'twMerge("p-2 p-4")→"p-4"'；排序需用ponytail等专用工具。
tailwind-merge 不能排序，只能去冲突
很多人误以为 twMerge 是用来“整理类名顺序”的，其实它根本不碰顺序——它只做语义覆盖：同一组工具类（比如都带 text-、bg-、p- 前缀）里，只保留最后一个有效值，其余直接删掉。
例如：twMerge('p-2 p-4 hover:p-1 hover:p-3') → 'p-4 hover:p-3'。它不重排、不归类、不加空格，更不会把响应式前缀 md:p-4 挪到前面去。
真正能排序的只有 ponytail CLI 或编辑器插件
如果你的 class 字符串已经很长（比如 "flex items-center justify-between w-full px-4 py-2 rounded-lg bg-blue-500 text-white hover:bg-blue-600 focus:ring-2 focus:ring-blue-400 disabled:opacity-50"），想按语义分组+升序排列，就得靠 ponytail 这类专治“类名乱序”的工具。
它默认按 Tailwind 官方的属性优先级排序：布局类（flex, grid）→ 尺寸（w-, h-）→ 间距（p-, m-）→ 颜色（bg-, text-）→ 状态变体（hover:, focus:）→ 响应式断点（md:, lg:）。
- CLI 用法：
npx ponytail sort --in-place src/**/*.tsx，直接改源码里的 class 字符串 - VS Code 插件支持选中后右键 “Sort Tailwind Classes”，实时预览效果
- 不推荐在运行时调用排序逻辑（如
useEffect里跑ponytail.sort()），它只适合构建期或编辑期 - 排序结果可配置：通过
.ponytailrc.json关闭某类前缀（比如禁用dark:排序，或把aria-类移到末尾）
别让 clsx 和排序工具互相打架
clsx 本身不保证输出顺序稳定——对象写法 {'p-4': true, 'p-2': false} 在 JS 引擎里可能按插入顺序，也可能按字典序；数组拼接 ['p-2', isActive && 'p-4'] 更是依赖运行时值。一旦你用 clsx 拼出类名再交给 ponytail 排序，就等于把动态逻辑和静态规则混在一起，容易出现“本地开发排好了，CI 构建时又乱了”。
- 最佳实践：所有固定类名（无条件判断的）统一用
ponytail排序；条件类名仍走clsx，但只放真正需要分支控制的部分（比如{'disabled:opacity-50': isDisabled}） - 避免嵌套：
clsx(ponytail.sort('p-2 m-1'), { 'text-red-500': error })是安全的；但ponytail.sort(clsx(...))会失败，因为clsx输出的是字符串，而ponytail.sort()期望接收原始未处理的 class 列表结构 - Vue 用户注意：
:class数组语法（['p-2', {'p-4': active}]）无法被 ponytail 解析，必须先转成字符串再排序
排序不是万能解药，优先级冲突还得靠 CSS 规则本身
类名排得再整齐，也不能改变 CSS 声明顺序。Tailwind 输出的 .p-4 和 .p-2 在最终 CSS 文件里谁在后面，取决于你的 content 扫描顺序、PostCSS 插件链执行时机，甚至 Vite HMR 缓存是否命中。所以排序只是提升可读性和协作一致性，不是解决样式覆盖问题的手段。
- 如果发现排好序的类名仍然没生效，先检查浏览器开发者工具里对应 CSS 规则的实际位置，而不是怀疑排序逻辑
- 响应式类（
md:p-4）和普通类（p-2）属于不同选择器，不存在“谁覆盖谁”，它们各自独立作用于不同断点 - 真正要防的坑是：把
ponytail当成twMerge用，比如指望它自动剔除text-red-500 text-blue-500中的前者——它不会，那是twMerge的活
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
