TailwindCSS如何通过媒体查询实现浏览器resize时元素显隐切换

核心判断 #

你对Tailwind移动端优先媒体查询的逻辑理解没有错误，display: none被更高优先级的断点类覆盖也不存在CSS层面的障碍，你写的元素显示隐藏逻辑本身是正确的。

常见不生效原因排查 #

• 检查tailwind.config.js中的screens配置
  Tailwind默认的断点是移动端优先的min-width规则，如果你手动修改过screens配置，改为了max-width的桌面端优先规则，或者删改了默认断点，就会导致匹配逻辑失效。默认断点配置如下可对照：

  /** @type {import('tailwindcss').Config} */
  module.exports = {
    theme: {
      screens: {
        'sm': '640px',
        'md': '768px',
        'lg': '1024px',
        'xl': '1280px',
        '2xl': '1536px'
      }
    }
  }
  

• 检查Tailwind的content配置是否完整
  如果你使用的是Tailwind v3的JIT编译模式，需要把所有用到Tailwind类的文件路径都添加到content数组中，否则Tailwind不会生成你用到的sm:inline、md:hidden这类带断点前缀的类，自然不会生效。配置示例：

  module.exports = {
    content: [
      "./index.html",
      "./src/**/*.{vue,js,ts,jsx,tsx}"
    ]
  }
  

• 检查全局CSS的优先级
  确认有没有其他全局CSS文件在Tailwind的样式引入之后加载，里面是否存在带!important的display相关规则，这类规则会覆盖Tailwind的工具类。

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