Next.js+TailwindCSS服务端渲染CSS实现内嵌样式求助

方案一：直接将Tailwind编译后的CSS注入服务端HTML #

这是最直接的解决方案，核心思路是把Tailwind编译生成的完整CSS内容，直接嵌入到服务端返回的HTML的<style>标签中，避免单独请求外部CSS文件。

1. 配置Tailwind CLI生成完整CSS文件
   在项目根目录的package.json中添加编译脚本，让Tailwind生成压缩后的完整CSS：

{
  "scripts": {
    "build:css": "npx tailwindcss -i ./src/styles/globals.css -o ./src/styles/inlined.css --minify"
  }
}

执行npm run build:css，会在指定路径生成包含所有Tailwind样式的压缩CSS文件。

2. 在根布局中注入CSS内容
   如果使用App Router（app/layout.tsx），直接在服务器组件中读取CSS文件内容并嵌入：

import fs from 'fs';
import path from 'path';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  // 读取编译后的CSS文件，仅在服务端执行
  const cssContent = fs.readFileSync(path.join(process.cwd(), 'src/styles/inlined.css'), 'utf8');

  return (
    <html lang="zh-CN">
      <head>
        {/* 将CSS内容直接注入style标签 */}
        <style dangerouslySetInnerHTML={{ __html: cssContent }} />
      </head>
      <body>{children}</body>
    </html>
  );
}

如果使用Pages Router，就在pages/_document.tsx中做同样的操作：

import Document, { Html, Head, Main, NextScript } from 'next/document';
import fs from 'fs';
import path from 'path';

class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx);
    // 读取CSS内容
    const cssContent = fs.readFileSync(path.join(process.cwd(), 'src/styles/inlined.css'), 'utf8');
    return { ...initialProps, cssContent };
  }

  render() {
    return (
      <Html>
        <Head>
          <style dangerouslySetInnerHTML={{ __html: this.props.cssContent }} />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

3. 验证效果
   执行npm run build && npm start启动生产环境，查看页面源码，会发现<head>中包含完整的Tailwind样式，而非外部CSS的<link>引用，服务端返回的HTML已携带所有样式。

方案二：禁用Next.js CSS按需加载（配合方案一） #

Next.js默认会将CSS拆分为按需加载的chunk，如果你希望完全禁用这个行为，确保所有样式都被内联，可以在next.config.js中配置：

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    optimizeCss: false,
  },
};

module.exports = nextConfig;

这个配置会让Next.js不再拆分CSS，结合方案一的内联操作，就能确保所有样式都被注入到服务端HTML中。

为什么你之前的方案失败？ #

• styled-components：需要额外配置babel-plugin-styled-components，并且在_document.tsx中收集服务端渲染的样式，但它和Tailwind的混用会增加复杂度，且无法直接将Tailwind的全局样式内联。
• CSS Modules：Next.js对CSS Modules的处理依然是生成外部文件，默认不会内联到HTML中，不符合你的需求。

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