3 styling systems in 1 React app

Photo by Pankaj Patel on Unsplash

When writing styles in React apps, I’ve found that there are a couple different situations that have different solutions that work well for them.

Yes, this means I have 3 different ways of styling in one React app. It’s not as bad as it sounds.

Anyway, here they are:

1. Most styles should use Tailwind¹. Great docs. It keeps everyone on the same system for colors, sizes, and spacing. And you get small stylesheet sizes. Usually somewhere around 98% of an app’s styles can be Tailwind.
   

2. For the few styles that can’t use Tailwind, use CSS modules². The only case I’ve used this recently is when defining my own keyframe animations. I could also see it being used for named grid areas. This shouldn’t be needed very much, but it’s nice to have when you need it.
   

3. For the rare cases where the style is highly dynamic, use inline React styles³. For example, when animating the position of something using JavaScript. Or perhaps computing a color based on someone’s username. This should rare.

1. Some people love Tailwind (like me). Some love to hate it. All systems have tradeoffs. Maybe a future article will go into what’s so great about it. In any case, Tailwind is pretty straightforward to set up.

2. If using Vite, you already have access to CSS modules.

3. All React apps have access to this, so there’s nothing to set up.