Tailwind 4自定义@font-face规则未包含在SSR响应中

我尝试通过备用字体解决CLS问题，但发现自定义的@font-face规则仅出现在初始渲染后加载的输出CSS文件中，并未包含在SSR响应的内联样式里。

我的Tailwind配置CSS代码如下：

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap')
layer(base);

@import 'tailwindcss';

@layer base {
  @font-face {
    font-family: poppins-fallback;
    src: local('Arial');
    size-adjust: 114%;
    ascent-override: 130.3358416%;
    descent-override: 57.51754455%;
    line-gap-override: 16.43358416%;
  }
}

@theme {
  --font-poppins: Poppins, poppins-fallback, sans-serif;
}

在Angular项目中的样式引入配置：

"styles": ["libs/tailwind/src/lib/tailwind.config.css"]

我曾尝试开启CSS压缩优化，但对当前问题无效：

{
  "plugins": {
    "@tailwindcss/postcss": {
      "optimize": {
        "minify": true
      }
    }
  }
}

原因分析 #

• Tailwind Tree Shaking机制：Tailwind默认会移除未被直接引用的CSS规则。由于poppins-fallback仅通过--font-poppins变量间接引用，Tailwind在SSR打包时可能判定该规则未被使用，从而从内联样式中剔除，仅保留在后续加载的打包CSS中。
• Angular SSR样式内联逻辑：Angular SSR仅内联当前页面渲染必需的关键样式，间接引用的字体规则容易被判定为非关键样式，延后到客户端加载阶段。

解决方法 #

方法1：强制Tailwind保留字体规则 #

修改tailwind.config.js，通过safelist强制保留字体相关规则，同时将字体定义移到标准的theme.extend.fontFamily中，让Tailwind准确识别规则的使用：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './src/**/*.{html,ts}',
    './libs/**/*.{html,ts}'
  ],
  safelist: [
    {
      pattern: /font-poppins/
    }
  ],
  theme: {
    extend: {
      fontFamily: {
        poppins: ['Poppins', 'poppins-fallback', 'sans-serif']
      }
    }
  },
  plugins: []
}

之后可以移除原CSS中的@theme定义，改用Tailwind标准的字体类（如font-poppins）。

方法2：单独提取@font-face到全局内联样式 #

创建独立的fonts.css文件，仅存放字体规则：

@font-face {
  font-family: poppins-fallback;
  src: local('Arial');
  size-adjust: 114%;
  ascent-override: 130.3358416%;
  descent-override: 57.51754455%;
  line-gap-override: 16.43358416%;
}

修改angular.json的styles数组，将该文件放在最前面，确保SSR时优先内联：

"styles": [
  "src/fonts.css",
  "libs/tailwind/src/lib/tailwind.config.css"
]

方法3：临时禁用Tailwind Tree Shaking（仅用于排查） #

在PostCSS配置中关闭Tree Shaking，验证是否为该机制导致的问题，但此方法会增大CSS体积，不建议生产环境使用：

{
  "plugins": {
    "@tailwindcss/postcss": {
      "optimize": {
        "minify": true,
        "purge": false
      }
    }
  }
}

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