直接改 theme.screens 会删默认断点导致 lg:、xl: 失效；必须用 theme.extend.screens 安全增/改断点，且值须为带单位字符串（如 '480px'），数组或函数写法均不生效，修改后需重启构建进程。

直接改 theme.screens 会删掉默认断点，导致 lg:、xl: 类全部失效；用 theme.extend.screens 才安全，改完必须重启构建进程。

为什么 screens: ['640px', '768px'] 完全不生效

Tailwind 只接受 screens 是纯对象（key-value），数组写法会被静默跳过——不报错、不生成任何 @media 规则。你写的 sm:text-lg 在最终 CSS 里根本不存在。

• 常见诱因：复制了旧版文档里的数组示例，或从 Stack Overflow 粘贴了过时配置
• 验证方法：打开构建后的 CSS 文件，搜 @media (min-width: 640px)，没这段就说明 screens 没被识别
• v3.3+ 连 screens: () => ({ sm: '640px' }) 这种函数写法也不支持（除非显式启用 JIT 扩展）

怎么用 theme.extend.screens 安全修改或新增断点

这是唯一推荐的方式：只覆盖/添加你想动的键，其余断点保持原样，插件兼容性不受影响。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 改一个值（比如把 lg 从 '1024px' 改成 '1100px'）：

  extend: { screens: { lg: '1100px' } }

• 新增断点（如 xs 或 desktop）：

  extend: { screens: { xs: '480px', desktop: '1440px' } }

  ，之后就能用 xs:hidden、desktop:w-1/2
• 键名不能含空格或特殊字符，也不能是纯数字（'1440': '1440px' → 生成非法选择器 1440:w-4）
• 值必须是带单位的字符串：'480px' ✅，480 ❌；'20rem' ✅，但必须加引号

改完没生效？三件事立刻查

Tailwind 的响应式类是构建时静态生成的，热更新 tailwind.config.js 不会触发重编译。

• 手动终止当前 npm run dev 进程，再重新启动
• 搜索生成的 CSS 文件，确认有类似 @media (min-width: 1100px) 的块
• Nuxt/Next 等框架缓存更顽固，需清 .nuxt 或 .next 目录，或加 --no-cache

最容易被忽略的耦合点

断点不是孤立的像素值。第三方插件（比如 @tailwindcss/aspect-ratio）会根据 lg 断点生成对应类；你调了 lg，但没验证插件是否还输出 lg:aspect-video，上线后就可能发现某些布局在大屏下直接崩了。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！