Next.js+Tailwind CSS中flex与hidden类冲突报错问题咨询

报错原因 #

这是Tailwind配套的ESLint插件（eslint-plugin-tailwindcss）的误报。hidden对应display: none，flex对应display: flex——插件默认认为这两个设置display属性的类冲突，但它没识别到你添加了lg:响应式前缀：默认状态下hidden生效（Logo隐藏），屏幕宽度达到lg阈值时，lg:flex会覆盖hidden的样式，让Logo以flex布局显示，实际功能完全正常，只是插件未处理响应式场景下的样式覆盖逻辑。

为什么删除任意一个类都不行 #

• 删除hidden：默认状态下Logo会直接显示，不符合你“默认隐藏、大屏才显示”的需求；
• 删除flex：大屏时hidden仍然生效，Logo无法显示，且items-center、justify-center等flex布局相关类也会失效（元素不是flex容器时这些样式不生效）。

解决办法 #

1. 全局调整ESLint规则 #

在你的ESLint配置文件（比如.eslintrc.json）中，修改规则允许响应式类覆盖基础类：

{
  "rules": {
    "tailwindcss/no-conflicting-classes": ["error", {
      "allowResponsive": true
    }]
  }
}

修改后插件会认可响应式前缀的优先级，不再触发误报。

2. 单独禁用该行报错 #

若不想修改全局规则，可在代码行上方添加注释，仅屏蔽当前行的冲突检测：

{/* eslint-disable-next-line tailwindcss/no-conflicting-classes */}
<div className="w-16 h-16 bg-dark text-light flex items-center justify-center rounded-full text-2xl font-bold border border-solid border-transparent dark:border-light hidden lg:flex">
  {/* Logo内容 */}
</div>

内容的提问来源于stack exchange，提问作者Shriyan Yamali