Tailwind v4 移除 JS 配置，仅支持带 --breakpoint- 前缀的 @theme 断点定义；类名如 xl2:w-full 必须真实出现在模板中，且 @theme 需置于被 PostCSS 处理并纳入 content 路径的 CSS 文件内。
tailwind.config.js 在 v4 中完全失效
Tailwind v4 彻底移除了 JS 配置支持，tailwind.config.js 文件被忽略——哪怕它还存在，任何 screens、extend.screens 的写法都不会生成对应媒体查询。你改了配置、重启服务、清缓存，xl2:w-full 依然不生效，根本原因就在这里。
@theme 声明必须带 --breakpoint- 前缀
v4 唯一认可的断点定义方式是 CSS 中的 @theme 规则，且变量名强制以 --breakpoint- 开头，否则不会被识别为断点：
- ✅ 正确：
@theme { --breakpoint-xl2: 1920px; } - ✅ 正确：
@theme { --breakpoint-ultra: 2560px; } - ❌ 错误：
@theme { --xl2: 1920px; }（无前缀 → 不触发断点生成） - ❌ 错误：
@theme static { --breakpoint-xl2: 1920px; }（static关键字禁用媒体查询生成）
值推荐用 rem（v4 默认按 rem 解析），但 px 也可用；注意单位必须显式写出，1920 或 '1920' 都会被跳过。
类名生成和媒体查询必须手动验证
v4 不再输出构建日志提示断点是否加载，一切静默。要确认断点真正起作用，必须手动检查：
立即学习“前端免费学习笔记（深入）”；
- 打开最终生成的 CSS 文件（如
dist/style.css），搜索@media (min-width: 1920px)—— 没找到就说明@theme未被解析或位置错误 -
@theme必须写在被 Tailwind PostCSS 插件处理的 CSS 文件中（如src/index.css），不能放在style标签、CSS-in-JS 或未 import 的独立文件里 - 确保该 CSS 文件已纳入
content扫描路径（v4 仍依赖此机制提取类名上下文） - 模板中必须真实出现
xl2:w-full这类字符串，否则 PurgeCSS 会剔除对应规则
断点名就是类名前缀，不支持动态计算
--breakpoint-xl2 定义后，可用的类名就是 xl2: 开头的全部工具类（xl2:text-lg、xl2:grid-cols-4 等），但注意：
- 断点名（
xl2）是硬编码进类名的，无法用变量拼接，class="xl2:text-lg"必须手写字符串 - 不支持运行时切换断点值：改了
--breakpoint-xl2的值，不会自动刷新已生成的媒体查询，必须重新构建 - 没有
max-width语法糖，要实现「仅超大屏以下」需手写@media (max-width: 1919px)，@screen在 v4 中已移除
最容易漏掉的是：v4 的断点系统完全脱离 JS 上下文，所有逻辑都压在 CSS 层级和构建流程上——错一个字符、少一个连字符、放错文件位置，都会导致断点彻底消失，且没有任何提示。
