NextJS中mt-[${headerHeight}px]动态className偶尔失效问题求助

在 NextJS 14.1.0 + TailwindCSS 3.4.1 环境下，尝试通过 Template 组件动态获取 header 高度，为 main 标签设置 className={mt-[${headerHeight}px]} 以适配顶部边距。但页面初始加载后该设置不生效，仅在修改该 className 代码并恢复后才正常；改用内联 style 设置 marginTop 可正常运行，希望采用 Tailwind 的方式解决此问题。

相关代码：
template.tsx

'use client';
import { useEffect, useState } from 'react';

export default function Template({ children }: { children: React.ReactNode }) {
  const [headerHeight, setHeaderHeight] = useState(133);

  useEffect(() => {
    const updateHeaderHeight = () => {
      const headerElement = document.getElementsByTagName('header')[0];
      if (headerElement) {
        const height = headerElement.offsetHeight;
        setHeaderHeight(height);
      }
    };
    updateHeaderHeight();
    window.addEventListener('resize', updateHeaderHeight);
    return () => {
      window.removeEventListener('resize', updateHeaderHeight);
    };
  }, []);

  return <main className={`mt-[${headerHeight}px]`}>{children}</main>;
}

Header.tsx

<header className='fixed top-0 left-0 w-full bg-green-500 flex items-center justify-between p-2.5 px-[1.875rem] md:px-[1.875rem] lg:px-[4.1rem] md:py-6 lg:py-[2.5rem] z-10'>
...
</header>

问题原因 #

Tailwind 的 JIT 编译器仅扫描代码中明确写死的类名，动态拼接的 mt-[${headerHeight}px] 在构建阶段无法被识别，因此不会生成对应的 CSS 规则。只有热更新时编译器重新扫描代码，才会生成该类样式，导致初始加载不生效。

解决方法：CSS 变量配合 Tailwind #

通过 CSS 变量传递动态高度，保持 Tailwind 类名固定，让编译器能正常识别并生成样式：

修改 template.tsx 代码如下：

'use client';
import { useEffect } from 'react';

export default function Template({ children }: { children: React.ReactNode }) {
  useEffect(() => {
    const updateHeaderHeight = () => {
      const headerElement = document.getElementsByTagName('header')[0];
      if (headerElement) {
        const height = headerElement.offsetHeight;
        // 将高度设置为根元素的 CSS 变量
        document.documentElement.style.setProperty('--header-height', `${height}px`);
      }
    };
    updateHeaderHeight();
    window.addEventListener('resize', updateHeaderHeight);
    return () => {
      window.removeEventListener('resize', updateHeaderHeight);
    };
  }, []);

  // 使用固定的 Tailwind 类，通过 CSS 变量传递动态值
  return <main className="mt-[var(--header-height)]">{children}</main>;
}

原理说明 #

• mt-[var(--header-height)] 是固定类名，Tailwind 编译器会识别并生成对应的 CSS 规则：margin-top: var(--header-height);
• 通过 JavaScript 动态修改 --header-height 变量的值，即可实时更新 main 的上边距，无需依赖动态拼接类名。

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