React.js中Tailwind断点任意值失效，提示混合单位不支持

问题核心原因 #

报错信息明确指向：你的Tailwind screens 配置中存在混合单位（比如同时包含px、rem、em等不同单位的断点），导致Tailwind无法支持min-*/max-*这类任意值断点变体。

虽然你提供的配置文件中没有显式修改screens，但可能存在隐性修改：

• 项目引入的第三方Tailwind插件（如UI组件库、自定义插件）修改了screens配置，加入了非px单位的断点；
• 其他关联配置文件（如PostCSS相关配置）间接篡改了Tailwind的screens设置。

解决方案 #

1. 排查并修复screens混合单位问题 #

• 检查项目中所有可能修改Tailwind配置的文件，包括第三方插件的文档，确认是否有插件添加了非px单位的断点；
• 如果找到混合单位的screens配置，统一为同一单位（比如全部改为px），或者移除冲突的断点设置。

2. 升级Tailwind CSS到最新稳定版 #

部分旧版本的Tailwind对任意值断点与混合单位的兼容性处理存在bug，升级到最新稳定版可能直接解决问题：

npm install tailwindcss@latest

3. 临时替代方案：自定义媒体查询类 #

如果暂时无法定位问题，可以通过@layer自定义工具类实现相同效果：
在项目的CSS入口文件（比如src/index.css）中添加：

@layer utilities {
  .bg-orange-400-min-1000 {
    @media (min-width: 1000px) {
      background-color: theme('colors.orange.400');
    }
  }
  .bg-orange-400-max-1000 {
    @media (max-width: 1000px) {
      background-color: theme('colors.orange.400');
    }
  }
}

之后在组件中直接使用这些自定义类即可：

<div className="bg-orange-400-min-1000">...</div>

内容的提问来源于stack exchange，提问作者isaac Азимов