Tailwind移动端类优先级高于响应式类 部分响应式样式失效问题问询

问题结论 #

该现象不符合Tailwind的默认设计预期，你写的响应式定位、展示类在屏幕宽度达到sm断点阈值时应当正常生效。

可能原因及排查方案 #

• 全局自定义样式冲突
  这是最高概率的诱因：检查你项目中自定义的全局CSS文件，是否存在给.fixed、.hidden等基础类添加!important修饰的规则，或者有权重更高的选择器（比如div.fixed、*[class*="hidden"]这类写法）覆盖了Tailwind生成的响应式样式。边框、文字颜色类没有被你自定义的全局样式覆盖，因此可以正常工作。
  排查方法：打开浏览器开发者工具，选中对应元素，查看样式面板里sm:relative、sm:flex规则是否被划了删除线，如果是，往上找覆盖它的规则来源修改即可。
• 变体配置补充验证
  虽然Tailwind默认给position、display类开启了响应式变体，你可以主动在配置中补充配置排除该问题，修改tailwind.config.js的variants.extend部分：

variants: {
    extend: {
        opacity: ['disabled'],
        backgroundColor: ['disabled'],
        borderColor: ['disabled'],
        textColor: ['disabled'],
        // 新增两行
        position: ['responsive'],
        display: ['responsive'],
    },
}

修改后重新编译项目验证是否生效。

• 编译缓存/版本问题

1. 清空项目构建缓存：删除node_modules/.cache目录，再重新执行构建命令
2. 你当前配置用的是Tailwind v2的写法，部分v2早期版本存在响应式类生成顺序的bug，可以升级到v2最新稳定版，或者迁移到Tailwind v3（仅需把配置中的purge字段改名为content即可，其余配置兼容）。

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