Angular v12组件库SCSS文件中Tailwindcss @apply指令编译失效问题

首先明确核心逻辑：@apply 是 Tailwind 提供的 PostCSS 扩展语法，浏览器原生不支持，必须在编译阶段转换成标准 CSS 规则才能生效。你遇到的现象本质是：

• 直接把 Tailwind 类写在 HTML 标签中时，使用组件库的项目的 Tailwind 会扫描到这些类名，自动生成对应的标准 CSS，所以生效
• 写在组件 button.component.scss 中的 @apply 没有在组件库编译阶段被转换成标准 CSS，打包后代码里仍然保留了 @apply 语法，浏览器无法识别，因此样式不生效

方案1：修复组件库编译流程，编译时转换@apply #

这个方案可以直接解决现有写法的问题，不需要修改业务代码：

1. 确认组件库根目录存在 postcss.config.js，配置如下，保证编译时会加载 Tailwind 插件处理样式：

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

2. 修改 angular.json 中对应组件库的构建配置，确保开启 scss 处理和 PostCSS 加载：
   找到对应库的 build 配置，添加/修改以下字段：

{
  "inlineStyleLanguage": "scss"
}

3. 检查 ng-package.json 配置，不要添加禁用 PostCSS 处理的相关配置，保持默认的样式编译逻辑即可。
4. 确认你的自定义 Tailwind 规则（比如示例中的 bg-placeholder-light 等自定义颜色）已经定义在组件库的 tailwind.config.js 中，保证编译时可以正确解析。

方案2：改用类绑定逻辑实现变体扩展（更适合组件库场景） #

如果不想踩 PostCSS 编译的坑，同时要保留 btn-primary 这类变体扩展能力，可以把样式逻辑移到组件类中用类绑定实现，完全不需要用到 @apply：

1. 在 button.component.ts 中添加类绑定逻辑：

import { Component, Input, HostBinding } from '@angular/core';

@Component({
  selector: 'app-button',
  template: `<ng-content></ng-content>`,
})
export class ButtonComponent {
  @Input() variant: 'default' | 'primary' | 'danger' = 'default';

  // 绑定宿主元素的class
  @HostBinding('class')
  get computedClasses(): string {
    // 基础样式，对应原来的.btn类的@apply内容
    const base = 'px-2 py-1 text-sm rounded-sm transition-all bg-placeholder-light hover:bg-placeholder active:bg-placeholder-dark relative border-2 border-transparent';
    // 变体样式，对应你要扩展的btn-primary等类
    const variantMap = {
      default: '',
      primary: 'bg-blue-500 hover:bg-blue-600 text-white border-blue-500',
      danger: 'bg-red-500 hover:bg-red-600 text-white border-red-500'
    };
    return `${base} ${variantMap[this.variant]}`;
  }
}

2. 使用组件时直接指定variant属性即可切换样式：

<app-button variant="primary">主按钮</app-button>
<app-button variant="danger">危险按钮</app-button>

这种方式所有 Tailwind 类都是直接写在 TS 代码中，只要使用组件库的项目在 tailwind.config.js 的 content 配置中包含了组件库的编译后文件，就能自动扫描到所有类名生成对应样式，不会出现失效问题。

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