We are not going to talk about the pros and cons of using atomic CSS here, as you might hear them many times already. Today, we are going to use a framework author’s perspective to see how we make the trade-off building those frameworks you love, their limitations, what we can do better to eventually benefits your daily work.

The Next.js frontend framework has been around for only a couple of years, but it is already one of the most popular tools in the React ecosystem.

Framer Motion makes it super easy to create great looking animations, but what if you want to have different animations for different screen sizes? With CSS animations you can just use a media query but did you know that by utilising the Window.matchMedia API or using CSS variables we can write responsive animations for javascript animation libraries like Framer Motion & React Spring?

UnoCSS is a modern, flexible, and high-performance CSS engine. It provides core CSS functionalities through presets, making application styling quick and easy without compromising performance or flexibility. It uses atomic CSS principles, allowing for the creation of small, reusable styles that can be combined for complex designs. UnoCSS enables the development of high-performance applications without the limitations of popular frameworks.

As developers we want to use tools that help make our code better and more maintainable and allow us to be our most productive. For me those tools include Tailwind CSS and Typescript. This post is a guide to using Typescript and Tailwind in Shopify themes.