CSS自定义Tailwind断点设置：覆盖theme.screens默认尺寸

Tailwind CSS 自定义断点时，有一个常见误区：写法必须使用对象语法。如果在 tailwind.config.js 的 theme.screens 中直接写入数组，例如 ['640px', '768px']，该配置不会被正确识别。正确的做法是提供一个纯对象，键名为断点名称，值为 CSS 宽度值——支持 px、rem、em 甚至无单位数字（会被自动转换为 px）。

必须在 theme.screens 里用对象语法，数组写法无法生效

Tailwind 内置的断点——sm、md、lg 等——实际上是 theme.screens 下存储的一组媒体查询最小宽度值。想自定义时，直接在 theme.screens 中写入一个新对象即可。但关键点在于：必须使用对象语法，数组格式 Tailwind 不会识别。

• 正确示范：

  module.exports = {  theme: {    screens: {      sm: '640px',      md: '768px',      lg: '1024px',      xl: '1280px',      '2xl': '1536px',    }  }}

• 错误写法：screens: ['640px', '768px'] —— 数组格式，直接失效
• 值也可以使用响应式字符串，例如 md: 'min-width: 768px'，但通常无需如此，保持默认行为更省心

覆盖默认值时，未声明的断点会全部丢失

这一点容易忽略。如果只定义了 sm 和 md，那么 lg、xl 等断点将不再存在——Tailwind 不会自动合并默认配置，而是直接替换整个 screens 对象。

• 想保留默认断点并只修改其中几个？必须将所有需要用到的断点都显式列出
• 想新增一个断点（例如 xxs），也需要一并写入对象中，不能只追加
• 如果项目依赖第三方插件（如 @tailwindcss/aspect-ratio）生成的断点类，这些插件通常只认默认断点名；改名后对应工具类可能失效

带单位与不带单位，底层处理方式不同

写 '640px' 和 640 看似相似，但底层处理逻辑不同：前者直接透传为 CSS 值；后者会被 Tailwind 自动转换为 640px。多数情况下没有区别，但在某些定制场景中会暴露问题：

• 使用 rem 单位时必须带引号，否则 JS 解析会报错：sm: '20rem' ，sm: 20rem （语法错误）
• 使用相对单位（如 em）时，不带引号会被当作数值计算，失去语义，因此一律用字符串更稳妥
• 如果使用 CSS 变量（例如 --breakpoint-sm），必须写成 sm: 'var(--breakpoint-sm)'，并确保变量已在 :root 中定义

修改配置后必须重启开发服务器，热更新无效

修改 tailwind.config.js 中的 screens 后，保存文件并不会让正在运行的 npm run dev 进程重新读取配置。可能出现的情况：CSS 类已生成，但对应的媒体查询未更新，或者类名未出现在构建结果中。

• 最稳妥的做法：按 Ctrl+C 终止当前进程，然后重新执行 npm run dev（或 pnpm dev 等）
• 部分 IDE 插件或文件监听器可能缓存了 config 内容，关闭再重新打开也有效
• 构建生产版本（npm run build）前务必确认配置已生效，否则上线后断点错乱，排查起来比较耗时

断点是基础层配置，一旦设置错误，所有响应式类（md:flex、lg:hidden）都会失效，且错误不会报红，仅表现为“样式无反应”。建议修改后立即在浏览器中检查生成的 @media 规则是否匹配预期值——这个习惯可以节省大量调试时间。