TailwindCSS xs断点覆盖其他断点：xs:hidden md:block不生效求助

核心原因1：断点尺寸与预期不匹配 #

你配置的md断点为75rem（换算为1200px，假设1rem=16px），而非Tailwind默认的768px。这意味着：

• xs:hidden会在屏幕宽度≥32rem（512px）时生效，隐藏元素
• md:block仅在屏幕宽度≥75rem（1200px）时才会生效，显示元素

如果你的测试屏幕宽度在768px-1200px之间，这个区间属于你定义的sm断点范围（48rem-75rem），此时xs:hidden的样式仍会生效，元素自然保持隐藏状态。

核心原因2：配置位置易引发混淆 #

虽然在theme.extend.screens中定义断点可以覆盖默认值，但这种方式会保留Tailwind默认的其他断点（如2xl），可能导致断点顺序或尺寸的混淆。更清晰的做法是直接在theme.screens中重新定义所有断点，完全替换默认列表：

const defaultTheme = require('tailwindcss/defaultTheme')
module.exports = {
  theme: {
    screens: {
      xs: '32rem',
      sm: '48rem',
      md: '75rem',
      lg: '92rem',
      xl: '112rem',
    },
  },
}

验证与修复建议 #

• 若你希望md断点对应默认的768px，将配置中的md值改为48rem（或直接写768px）即可
• 测试时可临时添加sm:block类，验证屏幕宽度≥48rem时元素是否正常显示，快速定位断点生效范围

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