如何解决Tailwind CSS与Sass混用时报错-css教程-PHP中文网

@apply 和 @screen 不能在 sass 文件中使用，因为 sass 编译器不认识这些 postcss 指令，会报错或丢弃；theme() 函数也无法调用，因其是 tailwind 的 js 运行时函数，与 sass 静态编译环境物理隔离。

如何解决tailwind css与sass混用时报错

不能在 Sass 文件里写 @apply 或 @screen，这不是配置问题，而是编译链路根本冲突——Sass 编译器压根不认识这些指令，会直接报错或静默丢弃。

Sass（Dart Sass）在 PostCSS 之前运行，@apply 是 Tailwind 的 PostCSS 插件才识别的规则。Sass 遇到它，要么报 Unknown rule @apply，要么整条声明跳过，不会传给后续流程。

@apply 必须出现在纯 .css 文件中，且该文件必须由 PostCSS 处理
哪怕你用 // @apply bg-blue-500 注释，也仅是注释，不会生成任何样式
@import "tailwind.css" 到 Sass 文件里？Sass 会把它当普通 CSS 导入，但此时 @apply 还没被处理，浏览器直接忽略整条规则

theme('colors.primary') 是 Tailwind 的 PostCSS 构建时函数，Sass 编译器完全无此概念——连函数签名都不存在，不是语法错，是作用域物理隔离。

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

错误信息通常是：Error: Undefined function theme() 或 Invalid CSS after "color: theme"
Tailwind 的 theme 是 JS 对象，Sass 的变量是静态编译值，二者不互通
想在 Sass 里模拟类似行为？得自己维护一个 $theme-colors map，并手动对齐 Tailwind 配置，否则每次升级都可能脱节

放弃让 Sass 主导样式逻辑，改用 PostCSS 生态承接嵌套 + 工具类能力，这是唯一稳定路径。

删掉所有 .scss 主样式文件，统一用 .css 后缀（如 components/button.css）
装插件：npm install -D postcss-import @tailwindcss/nesting
postcss.config.js 中确保顺序：postcss-import → @tailwindcss/nesting → tailwindcss
嵌套写法照常可用：.btn { @apply py-2 px-4; &:hover { @apply bg-blue-600; } }

只让它干一件事：定义设计令牌（颜色、间距、字体），然后双方分别导入，别指望它调用 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' }（注意：require 返回的是 Sass 模块对象，需确认导出方式）
更稳妥的做法是用 JSON 同步：tokens.json，两边都读它，避免构建时依赖 Sass 运行时