如何在Next.js中从API加载颜色到tailwind.config.ts？

根据颜色的使用场景（全局固定/动态变更），可以采用两种不同的实现方式：

一、构建时静态加载（适合全局固定、不频繁变更的颜色） #

Tailwind的配置文件是构建时同步执行的，无法直接在其中异步请求后端。可以通过预执行脚本提前获取颜色并写入本地文件，再在配置中导入。

步骤1：编写预获取颜色的脚本 #

在项目根目录创建fetch-colors.js：

const fs = require('fs');
const fetch = require('node-fetch');

async function fetchColors() {
  try {
    // 请求后端接口获取颜色配置
    const res = await fetch('https://your-backend-api/colors');
    const colors = await res.json();
    // 将颜色写入本地JSON文件
    fs.writeFileSync('./colors.json', JSON.stringify(colors));
    console.log('颜色配置已成功获取并保存');
  } catch (err) {
    console.error('获取颜色配置失败:', err);
    // 失败时回退到默认颜色
    fs.writeFileSync('./colors.json', JSON.stringify({
      primary: '#3b82f6',
      secondary: '#8b5cf6'
    }));
  }
}

fetchColors();

步骤2：在Tailwind配置中导入颜色 #

修改tailwind.config.ts：

import type { Config } from 'tailwindcss';
import colors from './colors.json';

const config: Config = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    './app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {
      colors: {
        primary: colors.primary,
        secondary: colors.secondary,
        // 添加其他从后端获取的颜色字段
      },
    },
  },
  plugins: [],
};

export default config;

步骤3：调整构建命令 #

修改package.json的build脚本，让构建前先执行颜色获取脚本：

{
  "scripts": {
    "prebuild": "node fetch-colors.js",
    "build": "next build",
    "dev": "next dev",
    "start": "next start"
  }
}

二、运行时动态注入（适合用户专属、动态变化的颜色） #

如果颜色需要根据用户或请求动态变更，可通过CSS变量结合Next.js的服务端渲染能力注入颜色，再在Tailwind配置中引用这些变量。

步骤1：在根布局中注入CSS变量（App Router） #

修改app/layout.tsx（Server Component支持异步请求）：

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

const inter = Inter({ subsets: ['latin'] });

export const metadata: Metadata = {
  title: 'Next App',
  description: 'Dynamic color demo',
};

// 从后端获取动态颜色
async function getColors() {
  const res = await fetch('https://your-backend-api/user-colors', { cache: 'no-store' });
  return res.json();
}

export default async function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const colors = await getColors();

  return (
    <html lang="en" style={{
      '--color-primary': colors.primary,
      '--color-secondary': colors.secondary,
    }}>
      <body className={inter.className}>{children}</body>
    </html>
  );
}

步骤2：在Tailwind配置中引用CSS变量 #

修改tailwind.config.ts：

import type { Config } from 'tailwindcss';

const config: Config = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    './app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {
      colors: {
        primary: 'var(--color-primary)',
        secondary: 'var(--color-secondary)',
      },
    },
  },
  plugins: [],
};

export default config;

Pages Router 版本适配 #

如果使用Pages Router，可通过getServerSideProps在_app.tsx中传递颜色：

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

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <html style={{
      '--color-primary': pageProps.colors.primary,
      '--color-secondary': pageProps.colors.secondary,
    }}>
      <body>
        <Component {...pageProps} />
      </body>
    </html>
  );
}

export async function getServerSideProps() {
  const res = await fetch('https://your-backend-api/user-colors');
  const colors = await res.json();

  return {
    props: { colors },
  };
}

export default MyApp;

方案对比 #

• 构建时方案：Tailwind会生成静态优化的类名，性能更好，但颜色变更需要重新构建项目。
• 运行时方案：支持颜色动态更新，无需重新构建，但Tailwind无法对CSS变量做静态优化（实际性能影响可忽略）。

内容的提问来源于stack exchange，提问作者Josué Mendonça