如何解决Angular Universal +13中Tailwind CSS的FOUC问题？

要解决Tailwind CSS样式表后置导致的FOUC问题并提升CLS评分，你可以通过服务端内联关键CSS的方式实现，具体步骤如下：

1. 服务端渲染时内联Tailwind CSS #

修改server.ts文件，添加逻辑读取编译后的Tailwind CSS文件，并将其内容内联到服务器渲染的HTML头部。这样用户首次加载页面时，样式会随HTML一起返回，避免等待外部CSS加载：

import { readFileSync } from 'fs';
import { join } from 'path';

// 在app.get('*', ...)的请求处理逻辑中调整
app.get('*', (req, res) => {
  // 读取原始index.html
  const indexHtml = readFileSync(join(DIST_FOLDER, 'browser', 'index.html'), 'utf8');
  // 读取编译后的Tailwind样式文件（路径根据你的项目结构调整）
  const tailwindStyles = readFileSync(join(DIST_FOLDER, 'browser', 'styles.css'), 'utf8');
  
  // 将样式内联到<head>标签末尾
  const inlineCssHtml = indexHtml.replace(
    '</head>',
    `<style>${tailwindStyles}</style></head>`
  );

  // 渲染处理后的HTML
  res.render(inlineCssHtml, { 
    req, 
    providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }] 
  });
});

注意：确保styles.css是Tailwind编译后的最终样式文件，路径要和Angular生产构建后的输出目录匹配。

2. 精简Tailwind生成的样式体积 #

避免内联过大的CSS文件，优化tailwind.config.js的content配置，让Tailwind只打包项目中实际用到的样式：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './src/**/*.{html,ts}',
    './server/**/*.{html,ts}' // 如果有服务端专属模板文件，也需要添加
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

3. 避免浏览器端重复加载CSS #

完成服务端内联后，需要确保浏览器端不会重复加载外部CSS文件：

• 检查angular.json中build配置的styles数组，确认Tailwind样式的引入方式。
• 测试生产环境构建后的页面，查看HTML头部是否只存在内联的<style>标签，无重复的<link>引入。

4. 验证效果 #

执行生产构建并启动SSR服务器：

npm run build:ssr && npm run serve:ssr

通过Chrome DevTools的Performance面板观察页面加载过程，或用PageSpeed Insights检测CLS评分，确认FOUC问题是否解决。

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