Tailwind CSS 规则

eslint-plugin-tailwindcss 旨在强制执行使用 Tailwind CSS 时的最佳实践和代码一致性。它的唯一目的就是通过 ESLint 来自动化 Tailwind CSS 的最佳实践，比如按照 Tailwind CSS 的官方排序来重新排列你的类，确保你的 CSS 类始终保持有序、高效和无错误，从而提高项目的可维护性。

// .eslintrc.js

module.exports = {
  extends: [
    'plugin:tailwindcss/recommended',
  ],
};

注意

截止目前 eslint-plugin-tailwindcss 需要 beta 版才支持 Tailwind CSS v4，请执行以下命令安装，并等待最终正式版

pnpm add eslint-plugin-tailwindcss@beta -D

规则名称	错误级别	配置选项	描述
classnames-order	warn	-	使用基于官方推荐顺序的 Tailwind CSS 类名一致排序
enforces-negative-arbitrary-values	warn	-	警告使用任意值时带有 - 前缀的类名
enforces-shorthand	warn	-	将多个 Tailwind CSS 类名替换为其简写形式
migration-from-tailwind-2	off	-	检测升级到 Tailwind CSS v3 时的过时类名
no-arbitrary-value	off	-	禁止在类名中使用任意值
no-custom-classname	warn	-	检测不属于 Tailwind CSS 的类名
no-contradicting-classname	off	-	避免使用相互矛盾的Tailwind CSS类名（例如"w-3 w-5"）
no-unnecessary-arbitrary-value	warn	-	避免使用不必要的任意类名