We all love vanilla CSS.don’t we ?? Of course, we do!!

Then why do we need all these libraries or frameworks ?

They simply make our lives easy, but with great power comes great responsibility.

Confused how ?

Don’t worry we will see how while concluding.

First let me give a brief on what these are:

Material UI:

This is a React UI library which complements React for a fast build. It comes with pre-built React components and a default Material Styled Theme(which is very common in Google products). We can either keep the default theme or override the default ones with ours. It also provides different Icons which we may need for building our Websites or Web apps. This is a JSX in style library which means we don’t have to leave our JSX file for styling the components hence, we don’t have to create separate styling sheets. Also we don’t need to learn new classes since we can use vanilla CSS with a javascript twist(explained below). With the help for prebuilt components e.g input field, button etc it becomes very easy to built quick builds. It keeps the folder structure more manageable and clean. Material UI also gives Breakpoints which is very helpful in making the website or web app responsive.

Above we have seen few of the main pros that Material UI has. But it also comes with some cons as well:

Its a third party library meaning we have to install it first before using. Which also means it will add more weight to our project. This invites performance issues.

Bit tricky to override default styles if we don’t know CSS well. Undoing these overrides are also tricky as well.

Although we define styling inside the JSX file but the styling is defined outside the component function meaning we have to leave our HTML for styling.

Through we can use vanilla CSS still we need to use it with the javascript flavour e.g background-color will become backgroundColor etc.

For more, please visit the official page here

Tailwind CSS:

This is a utility first CSS framework. Sounds complex no ?

Actually its a very simple concept. Basically Tailwind CSS provides different predefined classes also called utilities which is scoped to only a single CSS property like background-color etc. Though its a framework but it lets us have full control over the styling of our websites or we apps from scratch without having to override things. It follows a mobile first approach meaning the style we define will apply to small screen devices by default. Below are the responsive breakpoints we use:

This is also a JSX in style framework meaning we don’t have to leave our JSX files for styling. On top of that we also don’t need to leave the HTML as well, meaning we can define these utility classes directly inside our HTML tags, this makes the code shorter. We can style our components very fast and its very easy to create responsive designs without writing any media-queries( though in the backend Tailwind converts it to media-queries).

Like Material UI it also comes with its own set of cons, given below:

This is also a third party framework, meaning it will also add extra weight to the project(though after introduction of JIT it got better).

When it's easy to keep the code clean at the same time, it gets messy when we define all the utility classes inside the HTML tags. The readability decreases tremendously.

It does not have any built-in components, Few components should have been there. Which definitely would have added more colours to Tailwind CSS.

It takes time to learn these built-in classes. The documentation could be more in depth. For more details, please visit the official page here.

Conclusion

Actually we cannot compare Oranges with Apples, it all depend on the situation what is the best suited we have to choose that. There are other frameworks/libraries out there, but this does not mean we have to use all of them. Decide one and go ahead.

Coming back to that above famous Spider-Man tagine. Yes, we can use different CSS framework/libraries but at the same time we should not get away from our beloved Vanilla CSS since it happens easily. We have to be responsible in keeping the real identity of Vanilla CSS always.

We can also create our own CSS framework/libraries as well with SASS to keep it more customized as per our needs. Let's keep that for some other time.

Hope you had a good read and some takeaways.