Tailwind响应式宽度失效求助：w-75与md:w-50不生效

核心问题出在**w-75带!important**——Tailwind的响应式类（比如md:w-50）是通过媒体查询实现的，而!important会让w-75的优先级直接拉满，哪怕是大屏下的媒体查询规则也覆盖不了它。

另外补充一点：Tailwind默认并没有w-75、w-50这类预定义类，你用的应该是自己在配置文件里扩展的，而且扩展时给w-75加了!important属性。

解决办法 #

1. 去掉自定义类的!important（推荐）

打开你的tailwind.config.js，找到扩展宽度的配置，删掉!important：

module.exports = {
  theme: {
    extend: {
      width: {
        '75': '75%',
        '50': '50%',
        // 不要在这里加!important，让Tailwind的优先级规则正常工作
      },
    },
  },
}

这样大屏下md:w-50就能正常覆盖移动端的w-75了，因为媒体查询的选择器权重和普通类一致，但加载顺序靠后，能正常覆盖。

2. 改用内置的动态宽度类

如果你不想改配置，直接用Tailwind的动态值语法，不需要自定义类：

<div class="flex">
  <div class="w-[75%] md:w-[50%]">你的右侧区域内容</div>
</div>

这种写法不需要额外配置，响应式逻辑也能正常生效，适合快速解决问题。

3. 给响应式类也加!important（不推荐）

如果必须保留w-75的!important，那只能给md:w-50也加上!important，比如在配置里这样写：

module.exports = {
  theme: {
    extend: {
      width: {
        '75': '75% !important',
        '50': '50% !important',
      },
    },
  },
}

但这种方法会破坏Tailwind原本的优先级逻辑，后续维护容易出问题，不建议使用。

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