NextJS中Tailwind CSS响应式断点与默认尺寸异常问题

问题原因 #

你搞反了Tailwind响应式类的生效逻辑：Tailwind的断点是最小宽度触发，比如md:前缀的样式会在屏幕宽度≥md断点时生效，覆盖默认样式。你想要的是「小屏（<md）全屏，大屏（≥md）固定96宽度」，但写的w-96 md:w-full正好反过来——默认所有屏幕都是96宽度，md及以上变成全屏，完全不符合你的预期。

正确写法 #

把类的顺序和逻辑反过来，先写小屏的默认样式，再写大屏的覆盖样式：

<div className="w-full md:w-96">...</div>

这样默认（所有屏幕，包括<md）是全屏宽度，当屏幕≥md断点时，自动替换成w-96，完美匹配你的需求。

额外检查项 #

如果改完还是有问题，去看你的tailwind.config.js里的断点配置，确保md的数值是你预期的最小宽度（默认是768px）。比如要是你不小心把md设成了320px，那几乎所有设备都会触发md:的样式，自然会出现异常：

// tailwind.config.js 示例（确保screens配置正确）
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx}",
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      screens: {
        'md': '768px', // 这里别乱改，保持符合你需求的最小宽度
      },
    },
  },
  plugins: [],
}

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