Tailwind媒体查询异常：大于1000px正常，小于1000px失效

可能的原因及解决办法： #

• 检查Tailwind配置的断点冲突
  打开tailwind.config.js，查看theme.screens部分是否定义了与900px相关的断点（比如md: '900px'）。如果有，自定义的max-[900px]可能和内置的max-md规则优先级冲突，直接使用max-md:hidden替代即可，或者修改配置中的断点名称避免冲突。

• 清除缓存并重新构建
  Tailwind的样式缓存可能导致新的自定义断点未被编译，执行以下命令清除缓存并重新构建：

  npx tailwindcss clean
  npm run dev # 或你的项目构建命令
  

• 排查CSS优先级冲突
  打开浏览器开发者工具，查看目标元素的样式面板，确认hidden属性是否被其他内联样式、自定义CSS类覆盖。如果是优先级问题，可尝试调整自定义CSS的权重，或临时使用max-[900px]:hidden!（添加!important）强制生效（不推荐长期使用）。

• 确认Tailwind版本兼容性
  自定义max-[...]断点是Tailwind v3.2及以上版本的特性，若使用旧版本，执行升级命令：

  npm install tailwindcss@latest
  

内容的提问来源于stack exchange，提问作者Mr - Ammad