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',
  },
}

通過這個插件，可以在開發階段統一規範，減少因順序問題導致的樣式覆蓋衝突。