Magical Frontend Trio: React, Tailwind, and Framer Motion

8.26.24

When I first got into web dev, component libraries like Bootstrap and Material UI were huge. I wrote a blog post comparing those two back in 2021 and while I didn’t mention it specifically, there is this implication that when developing with React, you should pick one of the two. Component libraries seemed to go hand in hand with React for a long time. These libraries had a specific aesthetic that felt nice and modern and they promised to save you from the tedium of building components from scratch. Basically, these component libraries looked cool and saved you time; win win. But after only a few short years, the aesthetic of some of these libraries started to feel dated and the reality set in that fully customizing them is not worth the headache.

Bootstrap has been around for ages, and for good reason. It was a lifesaver for anyone looking to quickly build a responsive UI without needing to think too much about design. In hindsight, I think a lot of the popularity also came from people avoiding writing and learning real CSS. But with that ease came rigidity. You had to adhere to the Bootstrap way, and customization often meant fighting against its default styles. Material UI (MUI) brought some fresh air with a modern design system, but let’s face it, it could feel heavy and look super stock. Sometimes these out-of-the-box components don’t always align with the visual identity you want for your project.

I think Tailwind has been a tremendously positive influence on frontend development. It brought people back to writing and understanding CSS. Tailwind doesn't give you pre-built buttons or navbars but you can piece together the exact design you want without installing or importing any additional tooling. The framework forces you to think about styling in a modular way, directly within your markup. This might sound messy at first (I still see people hating on it on reddit every day), but it actually promotes a clear separation of concerns. You're never left wondering which CSS file to dig into when you want to tweak something.

More modern component libraries like DaisyUI, ShadcnUI and NextUI are now built on top of Tailwind CSS. They give you more control and less baggage than Bootstrap and MaterialUI. Working with these Tailwind component libraries definitely feels like a big step forward. Yet, as convenient as it is to have pre-built components, it doesn’t take long before you start to run into the same old walls: inflexible design patterns, inconsistent animations, limited components (you can but really shouldn’t mix and match these libraries) and the general sense that you’re still working within a box someone else designed.

Ok, let’s talk about Framer Motion. Framer Motion is an animation library designed for React that is made by Framer, which is a no-code website builder. I have never actually used Framer but I have a lot of experience developing with Webflow, which looks like Framer’s direct competitor. Framer Motion makes it incredibly easy to implement complex animations with pretty minimal code. Need a subtle fade-in on a component? A spring animation on page transitions? No problem. Framer Motion gives you all the tools without needing to deal with the tangled mess of traditional animation methods.

But here’s where the magic really happens, Framer Motion plays really well with Tailwind. Tailwind handles the initial CSS, while Framer Motion injects that dynamic energy and smooth interaction we’ve come to expect from modern web experiences. React, Tailwind, and Framer Motion aren’t just great individually, they complement each other perfectly. React lays the groundwork with its component-based architecture, allowing for modular and reusable code. Tailwind provides the design freedom to build exactly what you want, how you want it. And Framer Motion breathes life into your components, making them feel dynamic and responsive in a way that few other tools can.

With this trio, you’re not stuck in someone else’s design system. You’re not locked into their opinionated choices about how animations should work or what a button should look like. You’re free to create, iterate, and animate at will—without feeling like you’re hacking around arbitrary restrictions. I have truly found this combo has allowed me to avoid all pre-built component libraries. Component libraries are traditionally great for things like accordions, modals, navbars, etc. and using Tailwind and Framer Motion together, I have been able to create all of these from scratch without adding to the bloat of my projects. This trio of React, Tailwind and Framer Motion hasn’t just allowed me to stop using component libraries, it has allowed me to stop using third party libraries for things like toast notifications as well.