eslint-plugin-classname-arg-last 介绍

前置知识#

在使用 Tailwind CSS 时，组合 className 是常见需求。我们经常使用一个名为 cn 的方法来高效且优雅地管理 class，它通常封装了以下两个常用工具：

1. `clsx`#

更轻量、性能更优的 classnames 替代品。
支持字符串、对象、数组等形式组合 class。

示例：

clsx('btn', { 'btn-primary': isPrimary }) // => 'btn btn-primary'

2. `tailwind-merge`（简称 `twMerge`）#

用于合并冲突的 Tailwind CSS 类名。
处理如 text-sm text-lg 这类冲突，保留最后一个优先级更高的类。

示例：

twMerge('text-sm text-lg') // => 'text-lg'

3. `cn` 方法封装#

将以上两个库组合封装成一个统一的 cn 方法:

import { clsx, type ClassValue } from 'clsx'
import { twMerge } from 'tailwind-merge'

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(...inputs))
}

4. 为什么 `className` 要放在最后一个参数位？#

为了保证用户传入的样式能覆盖默认样式，推荐将 className 放在最后：

cn('default-class', className)

因为 twMerge 是从左到右合并，后面的类将优先保留。如果顺序相反，组件默认样式可能会覆盖用户意图。

我做了什么？#

为了保持 className 放在参数末尾的实践一致性，在 Grok3 的辅助下我开发了一个 ESLint 插件进行静态检测和自动修复，兼容 Eslint v7-v9。

Source：#

eslint-plugin-classname-arg-last

示例：#

// 报错示例
cn(className, 'text-sm')

// 正确写法
cn('text-sm', className)

配置方式：#

在 .eslintrc.js 中添加：

module.exports = {
  // ...
  plugins: ['classname-arg-last'],
  rules: {
    'classname-arg-last/classname-arg-last': 'error',
  },
}

通过这个插件，可以在开发阶段统一规范，减少因顺序问题导致的样式覆盖冲突。