在@mixin中使用@apply报错，求Tailwind+PostCSS解决方案

错误原因 #

Tailwind的@apply指令不支持在SCSS的@mixin这类嵌套At-Rule中直接使用——因为PostCSS处理流程里，Tailwind会先于SCSS编译执行，此时@mixin还未被展开为普通CSS规则，导致Tailwind无法识别@apply的上下文。

解决方案 #

方案一：调整PostCSS插件顺序，先编译SCSS再处理Tailwind #

修改你的postcss.config.js，将SCSS编译插件移到Tailwind相关插件之前，确保@mixin先被展开为普通CSS规则，再让Tailwind处理@apply：

module.exports = {
  parser: "postcss-scss",
  plugins: {
    "postcss-import": {},
    "@csstools/postcss-sass": {}, // 先编译SCSS，展开@mixin
    "tailwindcss/nesting": "postcss-nesting",
    tailwindcss: {},
    autoprefixer: {},
  },
};

注意：原配置中@csstools/postcss-sass传入的文件路径是错误的，该插件无需指定文件路径，会自动处理项目中的SCSS文件。

调整后，SCSS的@mixin会被先编译展开，@apply就会出现在普通的CSS选择器下，Tailwind就能正常处理了。

方案二：替换@apply为直接CSS属性，结合Tailwind theme()函数 #

如果不想调整PostCSS配置，可以将@apply的工具类转换为对应的CSS属性，利用Tailwind的theme()函数获取设计系统中的值，同时保留SCSS变量的灵活性：

@mixin card ($shadowColor) {
  // 用theme()获取Tailwind工具类对应的样式值
  padding: theme('spacing.4');
  margin: theme('spacing.4');
  box-shadow: theme('boxShadow.xl') $shadowColor;
  
  border-radius: 4px;
  border: 1px solid black;
}

这种方式完全避免了在@mixin中使用@apply，同时能复用Tailwind的设计系统参数。

额外修正点 #

你的SCSS代码中md:lg:grid-cols-4这类写法不符合Tailwind语法，响应式前缀需要分开声明，正确写法：

@apply grid sm:grid-cols-1 md:grid-cols-4 lg:grid-cols-4 md:gap-4 lg:gap-4;

内容的提问来源于stack exchange，提问作者Skunka