Why is Framer Motion Not Animating Colors from CSS Variables in Next.js?

The issue isn’t with Next.js or Tailwind at all—it’s that Motion (previously Framer Motion) isn’t automatically resolving CSS custom properties (the var(--…)) for its color interpolations. When you pass values like "var(--muted)" as inline styles, Motion sees them simply as strings and cannot interpolate them between keyframes.

What’s happening:

• When you define your initial and hover color as CSS variables (e.g. "var(--muted)" and "var(--primary)"), Motion can’t “read” their computed values during animation. It needs explicit color values (like "#64ff00" or "rgb(100, 255, 0)") so that it can interpolate numerically.
• The same applies to Tailwind’s generated classes when used directly on a motion component if you’re trying to animate between states with inline style overrides.

How to work around it:

1. Resolve the CSS variables in JavaScript:
   One solution is to compute the actual color value from your CSS variable (using getComputedStyle(document.documentElement) or a similar approach) and then pass that value to Motion.

   For example:

   TSXCopied
   import React, { useEffect, useState } from 'react';
   import { motion } from 'motion/react';
   
   type Props = {
     target: string;
     title: string;
   };
   
   const NavLink = (props: Props) => {
     const [colors, setColors] = useState({ muted: '', primary: '' });
   
     useEffect(() => {
       // Ensure that the CSS variables are defined in :root (global.css)
       const rootStyles = getComputedStyle(document.documentElement);
       const muted = rootStyles.getPropertyValue('--muted').trim();
       const primary = rootStyles.getPropertyValue('--primary').trim();
       setColors({ muted, primary });
     }, []);
   
     return (
       <motion.div
         layout
         className="mt-1 cursor-pointer uppercase text-xs mx-2 relative"
         initial={{ color: colors.muted }}
         whileHover={{ color: [colors.muted, colors.primary] }}
         transition={{ duration: 0.2 }}
         onClick={() => console.log(props.target)}
       >
         {props.title}
       </motion.div>
     );
   };
   
   export default NavLink;

2. Use non-animated approaches for CSS variables:
   If you only need a state change (without smooth interpolation), you might instead update the className on hover (via state or CSS hover selectors) rather than animating the inline style. That way Tailwind’s classes (or your custom CSS) could handle the color change.

Summary

Motion doesn’t automatically resolve or interpolate CSS custom properties. You need to pass explicit color values (e.g. computed in JS) if you want smooth animations between states. This is why your var(--muted) and var(--primary) strings aren’t working as expected in the motion.div—the library can’t work with them directly.