@screen在CSS中不生效是因为它不是原生CSS语法，而是Tailwind的PostCSS插件指令，必须在@layer块内且由tailwindcss()插件处理才能解析，否则会被忽略。
为什么@screen在CSS里不生效
直接在 CSS 文件里写 @screen sm 不会生成任何媒体查询规则，因为 @screen 是 Tailwind 的 PostCSS 插件指令，**只在 @layer 块内、且必须配合 Tailwind 的构建流程才能解析**。它不是原生 CSS 语法，浏览器不认识，PostCSS 也不在普通 CSS 文件中处理它。
常见错误是把 @screen 当成 @media 的简写，复制粘贴到 styles.css 或组件样式块里——结果编译后啥都没加，控制台无报错，但样式就是不响应。
-
@screen只能用在@layer components、@layer utilities或@layer base内部 - 必须确保该 CSS 文件被
tailwindcss()PostCSS 插件处理（即出现在content扫描路径或显式 import 到主入口） - 不能用在
style标签、createGlobalStyle或未经过 PostCSS 的 CSS-in-JS 环境中
@screen 的正确写法和位置
要在 CSS 中复用 Tailwind 断点值，必须走 @layer + @screen 组合，且文件需纳入构建链路。例如，在 src/styles.css 中：
@layer utilities {
.bg-gradient-sm {
@screen sm {
background-image: linear-gradient(to right, #3b82f6, #8b5cf6);
}
}
.text-lg-lg {
@screen lg {
font-size: 1.25rem;
}
}
}
关键点：
立即学习“前端免费学习笔记（深入）”；
-
@screen sm会自动展开为@media (min-width: 640px)（取决于tailwind.config.js中theme.screens.sm的实际值） - 不能写
@screen '640px'或@screen (min-width: 640px)—— 只接受已定义的断点名（sm、md、desktop等） - 如果自定义了
desktop: '1440px'，就必须先通过theme.extend.screens注册，才能在@screen desktop中使用 - 值必须是合法字符串单位（如
'1440px'），写成1440或'1440'会导致@screen desktop静默失效
用 @screen 替代重复写 @media 的陷阱
有人想用 @screen 省掉手写 @media，结果发现样式没覆盖、断点错位，问题往往出在断点语义和层叠顺序上。
-
@screen展开的是min-width，不支持max-width或orientation组合 —— 想做「仅小屏」必须手动补@media (max-width: 639px)，@screen帮不上忙 - 在
@layer utilities里写的规则，权重和内置工具类一致；但若放在@layer base，可能被后续@layer components覆盖，调试时得看 DevTools 的 Computed 面板确认来源 - 如果项目用了 PurgeCSS 或
content扫描，@screen定义的类名（如.bg-gradient-sm）必须在模板中真实出现，否则会被剔除 —— 光写 CSS 不够 - v4 开始，
@screen仍可用，但断点源已从 JS 配置转向 CSS 中的--breakpoint-sm变量；若你还在用 v3 配置却升级到 v4，@screen sm会 fallback 到默认值，而非你 config 里的自定义值
替代方案：什么时候该放弃 @screen 直接写 @media
当需求超出 @screen 能力边界时，硬套反而增加维护成本。典型场景包括：
- 需要
@media (prefers-reduced-motion: reduce)这类非宽度条件 - 要组合多个断点：
@media (min-width: 768px) and (max-width: 1023px)——@screen md和@screen lg无法表达“中间区间” - 第三方组件库要求特定媒体查询格式（如某些图表库的响应式容器）
- 调试阶段快速验证某段样式是否真由断点触发：直接写
@media (min-width: 1100px)更直观，避免配置/构建/缓存三层干扰
最常被忽略的是：Tailwind 的断点系统是静态生成的，而 @screen 是构建时展开的；一旦你改了 tailwind.config.js 里的 screens，所有用到 @screen 的 CSS 都必须重新构建 —— 不重启 dev server，@screen lg 还是旧的 1024px，哪怕你 config 已改成 1100px。
