使用 ESLint 检查 Tailwind
配置 eslint-plugin-tailwindcss，检查无效类名和冲突的工具类，并强制执行团队的类名约定。
使用 ESLint 检查 Tailwind 是 CoddyKit 上的免费 Tailwind CSS Academy 课时。 这是第 3 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Tailwind CSS Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Tailwind CSS Academy 课程共包含 4 节课。
为什么要检查 Tailwind classes
Tailwind class 名称中的拼写错误属于隐蔽错误——浏览器会直接忽略未知 classes，且不会在控制台发出警告。例如，bg-blue-50O 中将数字零写成了大写字母 O，不会应用背景色，而这个问题可能数日都不会被发现。配合 Tailwind 插件的 ESLint 能在开发阶段捕获这些问题，避免它们进入生产环境。
安装 eslint-plugin-tailwindcss
eslint-plugin-tailwindcss 是使用最广泛的 Tailwind ESLint 插件。它会根据您的 Tailwind 配置验证 class 名称，针对冲突的工具类发出警告，并可强制执行团队的 class 排序约定。请将它与 ESLint 一起安装到项目的开发依赖中。
npm install -D eslint eslint-plugin-tailwindcss
# If using a flat config (ESLint 9+)
npm install -D @eslint/js配置插件（传统配置）
在传统的 .eslintrc 格式中，请将 tailwindcss 添加到插件数组，并扩展推荐配置。推荐配置集会启用三个核心规则：classnames-order、no-custom-classname 和 no-contradicting-classname。
// .eslintrc.js
module.exports = {
extends: ['plugin:tailwindcss/recommended'],
plugins: ['tailwindcss'],
rules: {
'tailwindcss/classnames-order': 'warn',
'tailwindcss/no-custom-classname': 'warn',
'tailwindcss/no-contradicting-classname': 'error',
},
};配置插件（扁平配置）
对于 ESLint 9 新增的扁平配置格式，请导入插件，并将推荐配置展开到配置数组中。将 tailwindConfig 设置指向您的配置文件，这样插件在验证 class 名称时就能读取自定义主题值和插件。
// eslint.config.js
import tailwind from 'eslint-plugin-tailwindcss';
export default [
...tailwind.configs['flat/recommended'],
{
settings: {
tailwindcss: {
config: './tailwind.config.js',
},
},
},
];no-contradicting-classname 规则
no-contradicting-classname 规则会捕获应用于同一元素的冲突工具类——例如在同一个 div 上同时使用 block 和 inline，或者在没有响应式前缀的情况下同时使用 w-full 和 w-auto。这些冲突会产生难以预测的结果，没有检查支持时很难调试。
<!-- ESLint error: block and inline conflict -->
<div class="block inline text-red-500">
<!-- Correct: use responsive prefix to switch at breakpoints -->
<div class="block md:inline text-red-500">no-custom-classname 规则
no-custom-classname 规则会在您编写的 class 不属于 Tailwind 输出内容时发出警告——它既不是内置工具类，也不是在配置或插件中定义的自定义工具类。这有助于捕获拼写错误，并防止开发者在 Tailwind 项目中绕过正确流程直接编写普通 CSS class 名称。
<!-- ESLint warning: 'card-header' is not a Tailwind utility -->
<div class="card-header p-4 bg-white">
<!-- Option 1: Use only Tailwind utilities -->
<div class="rounded-lg bg-white p-4 shadow">
<!-- Option 2: Add 'card-header' to whitelist in ESLint config -->
/* settings: { tailwindcss: { whitelist: ['card-header'] } } */classnames-order 规则
classnames-order 规则会强制采用与 Prettier 插件生成的相同规范 class 顺序。如果同时使用这两个工具，请指定其中一个作为排序的唯一依据。大多数团队使用 Prettier 自动格式化，并禁用 ESLint 的排序规则，以避免两个工具之间发生冲突。
// .eslintrc.js — disable ordering rule when using Prettier plugin
module.exports = {
extends: ['plugin:tailwindcss/recommended'],
rules: {
// Prettier handles ordering — disable here to avoid conflicts
'tailwindcss/classnames-order': 'off',
// Keep these enabled
'tailwindcss/no-custom-classname': 'warn',
'tailwindcss/no-contradicting-classname': 'error',
},
};将有意使用的自定义 classes 加入白名单
如果您的项目在 Tailwind 工具类之外还使用自定义 CSS class 名称——例如第三方动画库或旧版 CSS 中的 classes——请将它们添加到 whitelist 设置中。这样既能消除误报，又能继续捕获 Tailwind class 名称中的真实拼写错误。
// .eslintrc.js
module.exports = {
extends: ['plugin:tailwindcss/recommended'],
settings: {
tailwindcss: {
config: './tailwind.config.js',
// Allow these non-Tailwind class names
whitelist: ['animate-fade-in', 'swiper-slide', 'js-modal-open'],
},
},
};在终端中运行 ESLint
请在 package.json 中添加一个面向所有模板文件的 lint 脚本。在本地和持续集成环境中运行它，以便在合并前发现 class 名称错误。--fix 标志可以自动修正排序问题，但无法修复拼写错误——这些问题需要人工检查。
// package.json
{
"scripts": {
"lint": "eslint 'src/**/*.{js,jsx,ts,tsx,html}'",
"lint:fix": "eslint --fix 'src/**/*.{js,jsx,ts,tsx,html}'"
}
}编辑器集成与实时反馈
请安装 ESLint VS Code 扩展，以便在输入时直接在编辑器中看到带下划线标记的错误。Tailwind class 错误会以内联的黄色警告或红色错误显示，让拼写错误无处遁形。再结合 Tailwind CSS IntelliSense 扩展提供自动补全，检查流程就能形成完整的反馈闭环。
// .vscode/extensions.json — recommended extensions for the team
{
"recommendations": [
"dbaeumer.vscode-eslint",
"esbenp.prettier-vscode",
"bradlc.vscode-tailwindcss"
]
}有效结合 ESLint 和 Prettier
使用 ESLint 进行验证——捕获拼写错误、矛盾和未知的 class 名称。使用 Prettier 进行格式化——将 classes 排列为规范顺序。禁用 classnames-order ESLint 规则，让 Prettier 独自负责排序。这样的职责分离可以让您充分发挥两个工具的优势，同时避免冲突。
// Recommended combined setup
// ESLint: validates correctness
// Prettier: formats order
// package.json scripts
"lint": "eslint src/",
"format": "prettier --write src/",
"precommit": "npm run lint && npm run format"快速检查
测试您对本课 Tailwind CSS Mastery 概念的理解。
课程回顾
本课您学习了：安装 eslint-plugin-tailwindcss 以捕获拼写错误和矛盾，了解三个核心规则（no-contradicting-classname、no-custom-classname、classnames-order），以及结合 ESLint 与 Prettier，让每个工具各司其职。接下来，我们将制定团队约定和样式指南。
用 AI 导师学习 HTML — 免费
在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。
- 课程
- 30
- 课程
- 120
常见问题解答
「使用 ESLint 检查 Tailwind」课时是免费的吗？
是的 — 「使用 ESLint 检查 Tailwind」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Tailwind CSS Academy 课程的其余内容，请升级到 CoddyKit PRO。 Tailwind CSS Academy 课程共包含 4 节课。
「使用 ESLint 检查 Tailwind」这节课中我会学到什么？
配置 eslint-plugin-tailwindcss，检查无效类名和冲突的工具类，并强制执行团队的类名约定。 你通过在浏览器中直接运行的动手代码来练习 Tailwind CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 Tailwind CSS Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 Tailwind CSS Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 3 节课，共 4 节。
「使用 ESLint 检查 Tailwind」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 Tailwind CSS Academy 课中编写并运行代码吗？
能。每节 Tailwind CSS Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。
此课程中的所有课时
- 审查 CSS 输出
- 类名排序与 Prettier 插件
- 使用 ESLint 检查 Tailwind
- 团队约定与样式指南