Tailwind CSS and Framer Motion components

Start with the naming, because it causes real confusion. Framer Motion was renamed to Motion and now ships as the motion package, imported as motion/react. The older framer-motion package still exists and still works, but new projects should install motion and write import { motion } from "motion/react". If you are reading a tutorial from 2023 the API is largely the same, so the only line you usually need to change is the import.

The division of labour is simple once you see it. Tailwind is a compiler for static utility classes, so it is good at everything that does not change: spacing, colour, radius, type, breakpoints. Motion owns anything interpolated over time. Where people get burned is applying a Tailwind transition or transform class to an element whose transform Motion is also animating. Motion writes inline styles, and inline styles win, so your class silently does nothing or the animation jumps at the start. Pick one owner per property and stay with it.

For an element that both animates on mount and needs hover feedback, the cleanest split is Motion for the entrance and Tailwind for the hover, but only if the hover changes something Motion is not touching, such as background colour or border. If the hover needs to scale the element, move that to Motion's whileHover too and drop the Tailwind hover:scale class. Mixing them on scale produces a visible stutter that is very hard to debug later, because nothing errors.

Two habits keep animated Tailwind pages fast. Animate transform and opacity, which the compositor can handle without recalculating layout, and avoid animating width, height, top or margin, which force layout on every frame. Tailwind makes the slow version easy to reach for, since transitioning h-0 to h-96 is one class away, and on a long page with several of those you will feel it on a mid-range Android device. If you need a size change, animate scale, or hand the job to Motion's layout prop which uses a transform under the hood.

Finally, respect the user setting. Wrap motion in a check on prefers-reduced-motion, either with Tailwind's motion-safe and motion-reduce variants for class-driven animation or with Motion's useReducedMotion hook for component-driven animation. Reduced motion does not have to mean no motion. Cutting distance and duration, so an element fades in place instead of sliding forty pixels, keeps the page legible for people who get motion sick without stripping the design back to nothing.