如何在使用TailwindCSS 4的Next.js应用中打印主题值？

TailwindCSS v4采用CSS优先的设计，移除了传统的配置文件和tailwindcss/resolveConfig工具，主题相关的值全部通过CSS变量注入到根元素（<html>）中。要在layout.tsx中打印主题，可通过客户端JS提取这些CSS变量实现：

实现步骤 #

1. 标记组件为客户端组件：Next.js 13+的根布局默认是服务器组件，需添加'use client'指令才能使用DOM API和副作用钩子。
2. 在useEffect中提取根元素的计算样式，筛选出所有以--tw-开头的Tailwind主题变量，整理为对象后打印。

代码示例 #

'use client';

import { useEffect } from 'react';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  useEffect(() => {
    const root = document.documentElement;
    const computedStyle = getComputedStyle(root);
    const theme: Record<string, string> = {};

    // 遍历提取所有Tailwind CSS变量
    for (const prop of computedStyle) {
      if (prop.startsWith('--tw-')) {
        const key = prop.replace('--tw-', '');
        theme[key] = computedStyle.getPropertyValue(prop).trim();
      }
    }

    console.log('Tailwind v4 主题:', theme);
  }, []);

  return (
    <html lang="zh-CN">
      <body>{children}</body>
    </html>
  );
}

说明 #

• 所有Tailwind内置主题值（如颜色、间距、字体等）都会以--tw-为前缀作为CSS变量存在于根元素中，遍历计算样式即可获取完整主题。
• 若你通过@theme指令在CSS中自定义了主题变量（如--color-primary），这些变量也会被自动包含在提取结果里。

内容的提问来源于stack exchange，提问作者GʀᴜᴍᴘʏCᴀᴛ