NextJS 15中Motion组件无法识别global.css变量及Tailwind类问题

一、先解决Tailwind text-muted 类不生效问题 #

Tailwind 默认没有 text-muted 内置类，需先在配置文件中自定义该颜色：

1. 打开项目根目录的 tailwind.config.ts，在 theme.extend.colors 中添加对应配置：

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      colors: {
        muted: 'var(--muted)', // 关联global.css中的变量，直接写色值也可
        primary: 'var(--primary)',
      },
    },
  },
  plugins: [],
}

2. 确保全局样式文件正确导入：
   在App Router的app/layout.tsx顶部导入global.css：

import './global.css';

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

3. 在motion.div的className中直接添加text-muted，替代initial里的颜色设置：

<motion.div
  layout
  className="mt-1 cursor-pointer uppercase text-xs mx-2 relative text-muted"
  whileHover={{ color: 'var(--primary)' }}
  transition={{ duration: 0.2 }}
  onClick={() => console.log(props.target)}
>
  {props.title}
</motion.div>

二、解决Motion动画中CSS变量不生效问题 #

若上述设置后whileHover里的变量仍不生效，按以下步骤排查：

1. 确认global.css中变量定义在:root选择器下（全局生效的正确方式）：

/* global.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --muted: #6b7280; /* 替换为你的实际色值 */
  --primary: #3b82f6; /* 替换为你的实际色值 */
}

2. 更新motion/react到最新版本，确保兼容React 19和NextJS 15：

npm install motion@latest

3. 若动画仍失效，可改用Tailwind hover类配合Motion过渡：

<motion.div
  layout
  className="mt-1 cursor-pointer uppercase text-xs mx-2 relative text-muted hover:text-primary"
  transition={{ duration: 0.2 }}
  onClick={() => console.log(props.target)}
>
  {props.title}
</motion.div>

三、额外注意事项 #

• NextJS 15 App Router中，全局样式仅能在app/layout.tsx中导入，组件内单独导入会导致变量无法全局生效。
• 使用TypeScript时，确保motion/react的类型声明已正确安装（通常安装包时自动包含）。

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