Tailwind CSS断点功能失效问题求助

针对你遇到的「基础类正常、断点前缀类（如sm:hidden、hidden md:block）完全不生效」的问题，按以下步骤排查：

• 第一步：检查content配置的文件范围
  Tailwind会根据content里的路径扫描文件，仅生成实际用到的类。你的配置是./.{html,js}，只能匹配根目录下的HTML/JS文件，如果断点类写在子文件夹（比如components/、pages/）里，Tailwind根本不会生成对应的断点CSS。
  修改成递归匹配所有子文件夹的文件：

  /** @type {import('tailwindcss').Config} */
  module.exports = {
      content: ["./**/*.{html,js}"], // 新增两个星号实现递归匹配
      theme: {
          extend: {
              // 原有颜色、字体配置保留
          },
      },
      plugins: [],
  };
  

• 第二步：验证断点类是否被生成
  打开浏览器开发者工具，在元素样式里搜索sm:hidden，看是否存在类似这样的媒体查询代码：

  @media (min-width: 640px) {
      .sm\:hidden {
          display: none;
      }
  }
  

  如果找不到，说明Tailwind没生成这个类，回到第一步确认content路径是否覆盖了所有用到断点类的文件。

• 第三步：确认断点阈值是否正确
  如果你之前修改过断点配置，可能不小心把sm/md的宽度设得异常，导致窗口大小没达到触发条件。可以在config里显式声明默认断点，确保数值正确：

  theme: {
      screens: {
          'sm': '640px',
          'md': '768px',
          'lg': '1024px',
          'xl': '1280px',
          '2xl': '1536px',
      },
      extend: {
          // 原有配置保留
      },
  }
  

• 第四步：清除浏览器缓存
  旧的CSS缓存可能导致新生成的断点类不生效，按Ctrl+Shift+R强制刷新页面，或者在开发者工具的Network面板勾选「Disable cache」后刷新。

• 第五步：确认watch命令正常工作
  检查终端里的--watch命令是否在文件修改时输出编译提示，如果没有，说明监听路径不对，重新确认输入/输出CSS的路径是否正确，比如：

  npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch
  

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