theme()在.scss中报错是因为sass编译早于postcss，无法识别tailwind的theme函数；两者变量系统物理隔离，需通过共享json或scss令牌文件同步，而非跨环境调用。
因为 Tailwind 的 theme() 函数和 Sass 变量根本不在同一个编译环境里，不是写法错，是物理隔离——Sass 编译器压根没见过 theme 这个东西。
为什么 theme('colors.primary') 在 .scss 里直接报错
Sass（Dart Sass）在构建流程中早于 PostCSS 运行，而 theme() 是 Tailwind 的 PostCSS 插件在解析 CSS 时才执行的函数。Sass 遇到它，连函数签名都找不到，只能抛出 Error: Undefined function theme() 或 Invalid CSS after "color: theme"。
-
tailwind.config.js里的theme是 JS 对象，只对 PostCSS 可见 -
_variables.scss里的$primary-color是 Sass 编译期静态值，PostCSS 也看不到（除非额外插件注入） - 两者变量系统没有自动映射、不共享作用域、不互通类型
为什么不能靠 @import "tailwind.css" 或 // @apply 注释绕过
这些都不是“语法兼容”问题，而是构建链路不可逾越的顺序限制。
- 在
.scss文件里写@import "tailwind.css"：Sass 把它当普通 CSS 导入，但此时@apply还没被 PostCSS 处理，浏览器直接忽略整条规则 - 写
// @apply bg-blue-500：只是注释，不会生成任何样式，更不会触发 Tailwind 解析 - 试图用
@use或@forward加载 Tailwind 配置：Sass 不认识tailwind.config.js的导出结构，require 失败或返回空对象
真正能落地的变量同步方案
放弃“调用”，改用“共享源”。关键不是让 Sass 理解 Tailwind，而是让两边读同一个数据。
- 新建
_tokens.scss，只放变量：$primary: #3b82f6;、$spacing-2: 0.5rem;—— Sass 直接用color: $primary - 在
tailwind.config.js中用 JS 对象重写配置：colors: { primary: require('./src/styles/_tokens.scss').primary || '#3b82f6' }（注意确认导出方式，Dart Sass 模块需export * from './_tokens.scss'或用 JSON 更稳） - 更推荐 JSON 方案：
tokens.json存所有设计令牌，Sass 通过postcss-sass-vars插件读取（需 PostCSS 阶段），Tailwind 用require('./tokens.json')，双方无构建依赖耦合
最容易被忽略的深色模式陷阱
很多人在 Sass 里用 lighten($primary, 10%) 生成 hover 色，却忘了 Tailwind 的 dark: 变体默认不认这些衍生值——它们是 Sass 编译期算出来的固定色值，不会随 prefers-color-scheme 切换，也不会参与 Tailwind 的暗色逻辑推导。
如果你需要响应式颜色派生，就得把逻辑移到 Tailwind 的 theme.extend 或自定义插件里，而不是依赖 Sass 函数。变量同步只是起点，行为一致性才是难点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
