tailwind 的 theme() 函数仅在 postcss 构建时有效，sass 无法调用因其作用域隔离且无变量映射；应通过共享变量文件或 json 同步设计令牌。
Tailwind CSS 的 theme() 函数只在 Tailwind 的配置和插件上下文中有效，Sass 文件里直接写 theme('colors.primary') 会编译失败——这不是语法错误，而是作用域根本不存在。
为什么 Sass 无法调用 Tailwind 的 theme()
Tailwind 的 theme() 是 PostCSS 插件在构建时解析的运行时函数，它不生成任何 Sass 可识别的变量或 map。Sass 编译器（Dart Sass）在处理 .scss 文件时，完全不知道 theme 是什么，连函数签名都找不到。
- 常见错误现象：
Error: Undefined function theme()或Invalid CSS after "color: theme": expected expression - 即使你在
tailwind.config.js里定义了theme: { colors: { primary: '#3b82f6' } }，Sass 也看不到这个结构 - 两者变量系统物理隔离：Tailwind 的 theme 是 JS 对象，Sass 的变量是编译期静态值
正确同步颜色/尺寸等基础值的两种实操方式
核心思路：把共享值抽到一个独立的、双方都能读的源，而不是试图让 Sass 去“调用” Tailwind。
- 推荐方案：用
_variables.scss定义所有设计令牌，再分别导入 -
// _variables.scss$primary-color: #3b82f6;$spacing-sm: 0.5rem;$font-size-base: 1rem; - 在 Sass 中直接使用：
color: $primary-color; - 在
tailwind.config.js中通过require引入（需确保路径正确）：colors: { primary: require('./src/styles/_variables.scss')?.primaryColor || '#3b82f6' }—— 实际更稳妥的是用 JS 对象重写一份，或用 JSON - 替代方案：用
postcss-import+postcss-sass-vars插件，把 Sass 变量注入 PostCSS 环境（但会增加构建复杂度，且不支持嵌套 map）
想在 Sass 里模拟 theme() 行为？用 map-get() + 自维护 map
如果你坚持要 Sass 里有类似 theme('spacing.2') 的写法，就得自己建一套 map 并手动维护与 Tailwind 的对齐：
- 定义：
$theme-spacing: ( '1': 0.25rem, '2': 0.5rem, '4': 1rem ); - 取值：
padding: map-get($theme-spacing, '2'); - 注意：
map-get()不支持点号路径（如'spacing.2'），必须扁平化键名或写嵌套 map + 多层map-get - 性能无影响，但每次 Tailwind 升级或改配置，你都得手动同步这个 map，容易脱节
最常被忽略的坑：深色模式下的颜色派生函数
很多人在 Sass 里用 lighten($primary-color, 10%) 生成 hover 色，却忘了 Tailwind 的 dark:... 类默认不认这些衍生值——它们是编译时静态生成的，不会随 Sass 函数动态响应。
- 解决方案只有两个：要么把深色变体也定义为变量（
$primary-dark: darken($primary-color, 20%)），要么放弃 Sass 派生，直接在tailwind.config.js的extend.colors里写死primary-dark - 切记：
color-contrast()这类函数只能在 Sass 内部用，传给 Tailwind 的 color 配置必须是纯色值，不能是函数调用
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
