Tailwind vs Material UI vs Styled Components vs React Bootstrap

When it comes to UI Frameworks, there are possibly hundreds. In this article, I will compare what I feel are the most popular ones — based on the following criteria:

1. Ease of development — easy to write, easy to read, quick to change
2. Performance — Speed of rendering
3. Build size
4. Ease of learning

Let’s get to it then!

TailwindCSS

Tailwind is a utility class library that exposes a wide range of easy-to-use classes that let you manipulate common CSS properties. When you chain these classes, we get the desired styling.

Ease of development: In terms of ease of development, I love Tailwind! You write your classNames right where you need the styles, you don’t need to go to another file (as with using CSS) or even another point in the same file (as with using JSS) to see the styles in action. This offers a fantastic developer experience. In some cases, you may actually want to create a stylesheet — eg. styling variants for a button. In this case, we can just create a stylesheet and use the theme directive to make use of tailwind’s theme variables and create consistent styles. Although, some people may find it annoying to read the long list of chained classes within their mark — I personally find it very convenient.

Performance: The speed of rendering is about the same as native HTML and CSS since these are just classes in a stylesheet.

Build size: To provide utility classes for all the variety of use cases that we come across during development, of course, the size of these libraries must be large. However, the use of libraries such as PurgeCSS helps remove all the unused classes from the final build. Tailwind has a built-in option to do this. Thus, we end up with a build size that is probably very close to using native css classes.

Ease of learning: Initially it may take some time to get used to the classNames for the different attributes. However, they are fairly intuitive and easy to remember. I would rate Tailwind as very easy to learn.

Tailwind is a personal favourite for 2 reasons — 
1. their default styles look amazing — elegant and clean
2. their range of utility classes is huge and covers almost every common use case effectively.
These are the reasons I would choose Tailwind over other utility class libraries like Bootstrap.

MUI

MUI is a UI toolkit that provides a theming framework, styling framework and common components — all immediately available to use.

Ease of development: Working with MUI is very good as you don’t have to write much of the code required for common functionalities like modals, accordions, select dropdowns, menus etc. However, MUI is terrible when it comes to customizing these pre-styled components. Even adding styles to regular components is a little ugly to read due to JSS. Moreover, if you need to use some external components, they are very difficult to customize so that you match the look and feel of MUI.

Performance: MUI is probably the slowest in rendering. I once had a dropdown with 1000 entries, and MUI couldn’t load it without at least a 1-second delay. They have some heavy styles for hover effects, ripple effects and shadows that make it computation intensive.

Build size: The build size of MUI is fairly large compared to other UI frameworks. This can be managed by using second-level imports whenever importing from MUI.

Ease of learning: MUI has very complex documentation with a large number of options for customizations. This makes it very difficult to learn. The styling system is also somewhat different from the general options available. Hence, getting used to it takes time.

MUI looks good by default. It is a very good option to use — ONLY IF your design makes use of their default styles. It would be good to confirm that they have all the components that you need to use beforehand. However, if you have a custom theme that you need to develop — this is the worst option. It is heavy on rendering and very difficult to customize. You would be better off using anything else.

Styled Components

Styled components use CSS in JS to let you style components and pass props that affect styling as well.

Ease of development: Styled components use CSS in JS. In terms of ease of development, I think it’s probably the worst. So while writing the CSS, you obviously need a linter — style lint — to allow parsing within a JS file. Any logic involving props is verbose to write as it needs to be added as a function at every interpolation site. The only potential benefit is that as compared to regular CSS, it is easier to navigate to a styled component than a class in a stylesheet. Creating a styled component for every minor change you need is definitely very frustrating compared to using something like Tailwind or Bootstrap.

Performance: Styled components have a slight overhead over regular CSS. However, this is quite minimal.

Build size: Here again, there is a slight overhead over regular CSS, but very minimal. In fact, in some cases where there isn’t too much styling, using styled-components might help you have a build size smaller than utility class libraries like Tailwind.

Ease of learning: Styled components are fairly easy to learn as they use just some additional syntax and JS interpolation over regular CSS.

Styled-components as a standalone framework seems a bit pointless to me. With no significant advantage over SCSS and more of the clutter created by every styled component for every single style change, I would advise against using it. In every case, to me, it just seems to add overhead. I may be wrong as I’ve only used them a couple of times in projects. But my experience of using it has always ended up with the question — why does this exist?

React Bootstrap

React bootstrap is a component library built on top of the utility class library — Bootstrap. It provides a balance between Tailwind and Material UI, where we get the utility classes from Bootstrap and the ready-made components from React Bootstrap

Ease of development: React bootstrap has easy-to-use components so you don’t have to write your own logic for commonly used components like selects, modals etc. It is also easy to customize these components using utility classes and theme variables. Additionally, because they have common utility classes, it also becomes easy to style components imported from other libraries to match the look and feel of React Bootstrap.

Performance: React bootstrap components have almost no overhead over using regular CSS. Their performance is very close to using regular CSS.

Build size: React bootstrap components, if imported and bundled correctly, will have very little impact on build size.

Ease of learning: React bootstrap components are simple, well-documented and easy to implement. The bootstrap classes are similar to Tailwind and are easy to get accustomed to.

React bootstrap is a very good balance between performance and developer friendliness. You don’t have to write code that is used in common components, you get easy customizations with Bootstrap utility classes, and performance is near native. It doesn’t have as wide a range of utility classes as Tailwind, but it does allow you to add all the styles and variables you need to create similar functionality. This to me, feels like a sweet spot.

Conclusion

Like everything in tech, which UI framework you choose will depend on your use case.

If you need a quick prototype — you would be better off choosing a component library. Between MUI, Bootstrap and others — you can choose based on the considerations like the default look/feel, rendering performance and customizability. MUI is performance-heavy and difficult to customize, but if you like the way it looks and don’t have particularly heavy UI elements, it’s a great option.

If you want to create custom components, you would be better off with TailwindCSS or React Bootstrap — where the CSS utils make it very easy to inject the styles you want. My personal choice would be Tailwind — although it doesn’t have an open-source component library like React Bootstrap, I just love their default styles and the exhaustive nature of the classes provided by them.

If you need custom components but don’t like the long className chaining like in TailwindCSS — you could go for Styled Components. They let you write your styles in JS which is easier to navigate compared to regular CSS. Personally, this is my least favourite of all the frameworks, but some people really prefer it. This is purely based on developer experience considerations.

What UI framework do you love working with? I’d love to know!