tailwind 的 theme() 函数不能在原生 css 媒体查询中使用，因其是 postcss 编译期函数而非 css 运行时语法；正确方式是将断点显式定义为 css 自定义属性（如 --breakpoint-md）并在 @media 中通过 var() 引用，或直接使用 tailwind 响应式工具类（如 md:grid-cols-2）。
因为 Tailwind 的 theme() 函数不能直接在原生 CSS 媒体查询中求值，它不是 CSS 运行时能识别的语法，而是 PostCSS 编译期处理的函数。
tailwind.config.js 里的 screens 不会自动变成 CSS 变量
Tailwind 的 screens 配置只用于生成工具类（如 md:block），不会导出为可被 @media 直接引用的值。你在 CSS 文件里写 @media (min-width: theme('screens.md'))，浏览器和 PostCSS 都不认识 theme() —— 它根本不是标准 CSS 函数。
- 开发环境可能“看起来生效”，是因为某些构建工具（如 Vite）的热更新或插件提前做了替换，但生产构建后必然失效
-
theme('screens.md')在纯 CSS 中等价于无效字符串，整个媒体查询块会被忽略 - 即使你用
@layer base或@layer utilities包裹，也无法绕过这个语法限制
正确引用断点的两种方式
必须把断点值显式暴露为 CSS 自定义属性，或改用 Tailwind 原生响应式类。
- 推荐做法：在
tailwind.config.js的theme.extend.colors或theme.extend.fontSize之外，额外定义theme.extend.screens并同步写入:root：
/* 在 main.css 或 globals.css 中 */
:root {
--breakpoint-sm: 640px;
--breakpoint-md: 768px;
--breakpoint-lg: 1024px;
}
然后在媒体查询中用 var(--breakpoint-md)：
@media (min-width: var(--breakpoint-md)) {
.custom-layout { grid-template-columns: repeat(2, 1fr); }
}
- 替代方案：放弃自定义媒体查询，直接用 Tailwind 工具类（
md:grid-cols-2），它们由 PostCSS 在构建时展开为真实媒体查询
Nuxt/Vite 等框架下特别容易踩的坑
这些框架的 CSS 压缩或 PostCSS 插件链（如 cssnano）会进一步破坏非法语法，比如把 @media (min-width: theme('screens.lg')) 错误解析成 @media(min-width:theme(screens.lg))，连括号空格都丢掉，导致整条规则被丢弃。
- 检查构建产物中的 CSS 文件，确认是否真有对应媒体查询代码生成
- 禁用 cssnano 的
discardUnused或调整postcss.config.js中插件顺序，无法解决根本问题——根源是语法非法 - 不要依赖开发服务器的“侥幸通过”，生产构建才是最终检验场
真正要记住的只有一条：Tailwind 的配置项是编译时上下文，不是运行时 API。任何想在 CSS 文件里直接调用 theme()、screen() 或 color() 的写法，本质上都在试图让 CSS 解析器执行 JavaScript 函数——这永远不可能成功。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
