Angular项目中Tailwind CSS的@apply指令无法生效问题排查求助

问题根因 #

• 你在tailwind配置中直接覆盖了theme.colors字段，仅保留了transparent、black、white三类颜色，Tailwind默认的所有内置色彩（包括你用到的green色系）都被移除，border-green-400工具类本身不存在，@apply调用不存在的工具类自然无法生效。
• 额外配置错误：你的配置文件中出现了两处variants配置项，一处写在theme字段内部属于无效配置，可能引发配置解析异常。
• 若颜色配置无误仍失效，大概率是你的自定义类没有用@layer包裹，生产构建时被PurgeCSS当作未使用的样式误删除，或者自定义样式没有写在包含@tailwind指令的全局样式文件中。

修复方案 #

1. 保留默认色彩体系：将你自定义的颜色从theme.colors移到theme.extend.colors中，这样既可以保留自定义的black、white配置，也不会覆盖Tailwind默认的其他色彩，修改后的配置参考如下：

module.exports = {
  purge: ["./pages/**/*.{js,ts,jsx,tsx}"],
  darkMode: "class",
  theme: {
    extend: {
      // 自定义颜色移到extend中，不覆盖默认色彩体系
      colors: {
        transparent: "transparent",
        black: {
          light: "#1D1D1F",
          DEFAULT: "#000000",
        },
        white: "#fff",
      },
      animation: {
        left: "left 0.3s",
        right: "right 0.3s",
        modal: "modal 0.3s",
        "drawer-right": "drawer-right 0.3s",
        "drawer-left": "drawer-left 0.3s",
        "drawer-top": "drawer-top 0.3s",
        "drawer-bottom": "drawer-bottom 0.3s",
      },
      keyframes: {
        "drawer-right": {
          "0%, 100%": { right: "-500px" },
          "100%": { right: "0" },
        },
        "drawer-left": {
          "0%, 100%": { left: "-500px" },
          "100%": { left: "0" },
        },
        "drawer-top": {
          "0%, 100%": { top: "-500px" },
          "100%": { top: "0" },
        },
        "drawer-bottom": {
          "0%, 100%": { bottom: "-500px" },
          "100%": { bottom: "0" },
        },
        modal: {
          "0%, 100%": { top: "-500px" },
          "100%": { top: "0" },
        },
        left: {
          "0%, 100%": { transform: "translateX(-100%)" },
          "100%": { transform: "translateX(0)" },
        },
        right: {
          "0%, 100%": { transform: "translateX(100%)" },
          "100%": { transform: "translateX(0)" },
        },
      },
      // 原theme内的variants配置移到extend中
      transitionProperty: {
        height: "height",
      }
    },
  },
  variants: {
    extend: {
      backgroundColor: ["active", "checked"],
      inset: ["checked"],
      opacity: ["disabled"],
      textColor: ["active"],
    },
  },
  plugins: [],
};

2. 自定义样式加@layer包裹：修改你写.active类的样式文件，用@layer components包裹自定义类，避免被PurgeCSS误删：

@layer components {
  .active {
    @apply border-r-4 border-green-400;
  }
}

3. 确认样式文件引入规则：你的自定义样式必须写在包含以下三个指令的全局CSS文件中，且要保证@layer代码写在@tailwind components之后、@tailwind utilities之前：

@tailwind base;
@tailwind components;
@tailwind utilities;

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