Material-UI vs Tailwind CSS
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:
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.
For more, please visit the official page here
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.
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.
Did you find this article valuable?
Support Braincuber Technologies by becoming a sponsor. Any amount is appreciated!