NextJS 14.2+Tailwind多域名项目：如何按目录隔离globals.css？

针对你的Next.js 14.2 + App Router + Tailwind CSS多域名项目，要实现CSS按域名隔离、避免交叉污染，可通过以下步骤完成：

1. 配置中间件实现域名路由映射 #

在项目根目录创建middleware.ts，根据请求域名自动转发到对应子目录：

import { NextRequest, NextResponse } from 'next/server';

const domainRoutes = new Map([
  ['domainA.com', '/domainA'],
  ['domainB.com', '/domainB'],
  ['domainC.com', '/domainC'],
]);

export function middleware(request: NextRequest) {
  const host = request.headers.get('host')?.replace(/:\d+$/, '');
  if (!host) return NextResponse.next();

  const basePath = domainRoutes.get(host);
  if (basePath) {
    const url = new URL(request.nextUrl);
    url.pathname = `${basePath}${url.pathname}`;
    return NextResponse.rewrite(url);
  }

  return NextResponse.next();
}

export const config = {
  matcher: ['/((?!api|_next/static|_next/image|favicon.ico).*)'],
};

2. 调整域名专属Layout，单独引入CSS并添加隔离类 #

每个域名的根layout.tsx仅引入自身的CSS，并给根容器添加唯一类名用于样式隔离：

以app/domainA/layout.tsx为例：

import './globals.css';
import type { Metadata } from 'next';

export const metadata: Metadata = {
  title: 'Domain A',
  description: 'Domain A Site',
};

export default function DomainALayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return <div className="domain-a">{children}</div>;
}

同理给domainB的Layout添加domain-b类，domainC添加domain-c类，各自引入专属的globals.css。

根目录app/layout.tsx保持极简，不引入任何域名特定CSS：

import './global.css';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

3. 配置Tailwind CSS实现样式隔离 #

修改tailwind.config.ts，限定每个域名的样式作用范围，并禁用全局默认样式避免污染：

import type { Config } from 'tailwindcss';

const config: Config = {
  content: [
    './app/domainA/**/*.{js,ts,jsx,tsx,mdx}',
    './app/domainB/**/*.{js,ts,jsx,tsx,mdx}',
    './app/domainC/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
  corePlugins: {
    preflight: false,
  },
};

module.exports = config;

然后在每个域名的globals.css中，用嵌套选择器包裹所有样式，确保仅作用于当前域名：

app/domainA/globals.css示例：

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

.domain-a {
  @apply bg-gray-50 text-gray-900;

  & .btn-primary {
    @apply bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded;
  }
}

app/domainB/globals.css示例：

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

.domain-b {
  @apply bg-slate-900 text-white;

  & .btn-primary {
    @apply bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded;
  }
}

4. 验证构建后的CSS隔离效果 #

执行npm run build后，查看.next/static/css目录，会生成多个独立的CSS chunk，分别对应不同域名的路由。访问不同域名时，浏览器只会加载对应域名的CSS文件，不会加载其他域名的样式资源。

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