Tailwind自定义xs断点下添加xs:hidden导致各断点display值异常问题

问题原因 #

Tailwind 2.x 版本中，通过 theme.extend.screens 新增的自定义断点会直接追加到默认断点列表的末尾，不会自动按照断点的实际像素值排序。你自定义的 xs: 320px 实际像素值小于默认的 sm、md 断点，但在断点列表中排在所有默认断点之后，导致最终生成的CSS规则顺序为：

1. sm:hidden
2. md:flex
3. xs:hidden

CSS规则优先级相同时，后声明的规则会覆盖前面的规则。因此当屏幕宽度≥320px时，xs:hidden 始终生效，直接覆盖了 md:flex 的显示规则，导致md及以上尺寸也无法正常展示元素。

解决方案 #

方案1：调整断点配置（推荐长期使用） #

直接覆盖 theme.screens 配置，手动按照像素从小到大排列所有断点，保证顺序正确：

const colors = require("tailwindcss/colors");

module.exports = {
  darkMode: "media",
  theme: {
    // 直接定义完整的screens列表，而非用extend新增
    screens: {
      xs: "320px",
      sm: "640px",
      md: "768px",
      lg: "1024px",
      xl: "1280px",
      "2xl": "1536px"
    },
    extend: {
      colors: {
        orange: colors.orange,
      },
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

方案2：简化类名写法（适配当前需求的最优解） #

Tailwind 是移动端优先的框架，不带断点前缀的类会对所有屏幕尺寸生效。你要实现「仅md及以上尺寸显示」的效果，不需要分别定义xs、sm断点的隐藏规则，直接用以下写法即可：

<div class="bg-gray-500 hidden md:flex">
  <h1>foo</h1>
</div>

hidden 会默认让元素在所有尺寸下隐藏，md:flex 仅在≥md尺寸时覆盖隐藏规则，让元素显示，完全符合你的预期，也不需要调整断点配置。

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