CSS怎样自定义Tailwind的断点设置_在theme.screens中重写默认尺寸

作者：袖梨 2026-07-06

自定义 Tailwind 断点必须在 theme.screens 中使用对象语法，如 sm: '640px'；数组写法会导致失效，且会完全替换默认断点，修改后需重启开发服务器。

直接在 `theme.screens` 里写死新值就行，但必须用对象语法，不能用数组

Tailwind 默认的断点（sm、md、lg 等）本质是 theme.screens 下的一组媒体查询最小宽度值。想自定义，就在 tailwind.config.js 的 theme.screens 位置提供一个纯对象——键是断点名，值是 CSS 宽度值（支持 px、rem、em 或无单位数字，后者会被自动加 px）。

常见错误是照抄默认配置里的数组写法：['640px', '768px', ...]，这会导致 Tailwind 启动失败或断点完全不生效。

✅ 正确写法：

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

⚠️ 错误写法：screens: ['640px', '768px']（数组格式，Tailwind 不识别）
? 值可以是响应式字符串，比如 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 中定义