如何在Next.js的CSS中使用环境变量指定基础颜色？

CSS的env()函数仅支持读取浏览器原生环境变量（如safe-area-inset-top这类），没法直接读取Next.js的NEXT_PUBLIC_*客户端环境变量，这就是你代码里环境变量被忽略的核心原因。下面是两种可行的解决方式：

方法一：通过根布局注入内联样式 #

在Next.js的根布局文件中（App Router用app/layout.tsx，Pages Router用pages/_app.tsx），直接给根元素设置内联样式，注入CSS变量：

App Router 示例（layout.tsx） #

import './globals.css';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html 
      style={{
        '--primary': process.env.NEXT_PUBLIC_PRIMARY_COLOR || '#0096d0'
      }}
    >
      <body>{children}</body>
    </html>
  );
}

Pages Router 示例（_app.tsx） #

import '../styles/globals.css';
import type { AppProps } from 'next/app';

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <div 
      style={{
        '--primary': process.env.NEXT_PUBLIC_PRIMARY_COLOR || '#0096d0'
      }}
    >
      <Component {...pageProps} />
    </div>
  );
}

export default MyApp;

之后保留globals.css里的--primary-bright定义即可，它会自动读取注入的--primary变量：

@layer base {
  :root {
    --primary-bright: hsl(from var(--primary) h s calc(l*1.5));
    /* 其他变量... */
  }
}

方法二：用Tailwind CSS主题配置（若项目使用Tailwind） #

如果你的项目基于Tailwind CSS开发，可以直接在主题配置中引用环境变量：

// tailwind.config.ts
/** @type {import('tailwindcss').Config} */
export default {
  theme: {
    extend: {
      colors: {
        primary: process.env.NEXT_PUBLIC_PRIMARY_COLOR || '#0096d0',
        'primary-bright': 'hsl(from var(--primary) h s calc(l*1.5))',
      },
    },
  },
};

之后可以直接通过Tailwind类名（如text-primary）或CSS变量（如var(--tw-color-primary)）使用这些颜色。

注意事项 #

• 确保环境变量以NEXT_PUBLIC_开头，只有带这个前缀的变量才会被暴露给客户端代码。
• 修改环境变量后需要重启Next.js开发服务器，否则新的变量值不会生效。

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