Comparing Modern CSS Solutions (Tailwind vs MUI vs Bootstrap vs Chakra vs...)

I keep fighting to abandon BS!

I just don't think you have much experience working with MUI, I can customize it to use it anyway I want. I move much faster than any other solution. I have many custom interchangeable themes, and easily can override any styles and if need be can use their style component to create something custom or easily over ride styles in a 3rd party component like high charts. I think it's the best option for dev velocity, custom UI with a familiar UX for most users, and well documented for teams or individuals.

Like you didn't even pull up the docs for material ui in this video....just shilled tailwind. Like i dont have a components folder with a 1:1 with material ui like u stated 31 min in the video. Just have a theme object that allows me to use styleOverrides for each component. And then sometimes will break it out into a component in my app if i want to do something custom. Which I can use typescript to document my custom variants easily. So If I want it to look slightly different in two different places its an easy prop I can pass. And then you go on to say your devs are bottle necked by how well they know the architecture....can say that about anything. So I just don't think you have the experience with MUI to know what you're talking about.

FYI I'm the same guys who said next-auth doesn't work in react-native and you wanted to gift me something on telegram.

you are so helpful thank you

Hope that you have used a condom after having sucked tailwind this way.
Every developer that are engaged in tailwind like this are just people that does not understand css at first.
It’s not a bad solution, it’s just sad to see people arguing for it just because they don’t understand vanilla css enough…

Brilliant. Thank you. 🙂

Love the knowledge and agree with everything here. I'm not a firm supporter of the frequent vulgarity, though. For some reason it's become extremely pervasive in everything and it detracts from the quality of delivery. Sure, most of us are thinking unhappy things about tools/libraries/etc. that work inconsistently (or too consistently) for what we're trying to do, but it's a reaction we should really only express in our heads.

everything in javascript suffered abstraction hell

Thank you

lol, bootstrap goes "negative ugly"...does that overflow and is beautiful again? ;D

You are the best Theo. This definetely helped me navigate the mental jungle I am dropped in when trying to understand this

Great friggin video. I'm ripping my hair out trying to grasp what is good in the world of styling and CSS

Thanks man this was super helpful. As a newbie all these libraries and tools get confusing but now it makes way more sense.

so no good datepicker, clock and calendar
means MUI is better with functionality part

Also please explain what do you mean by cannot build design with MUI.
I'll be using Tailwind in future.

"Yeah, don't use bootstrap. It's 2022. You know better." ROFL

I like doing backend, I hate doing styles, and my users don't deserve better. That's why I use Bootstrap 👍

Where would SCSS with BEM naming conventions fit within this. You have as much control as Tailwind, but Dev's do need to know CSS so you might want to look at some component libraries to copy from to help you build your own. Tree shaking is not built in.

One of the best and most insightful video Theo has imho

Damn you are thorough.

I think that u're confusing MUI with Material Design, MD is a prototype of how a digital user interfaces should be designed using a scientific approach on the user nehaviours; MUI is a React first implementation ( a lot is not implementated like as animation, audio and so on ) of Material Design 2. I've used a Material Design system built on top of tailwind and I was shocked when I realized that dynamic styling things like: `bg-${ PALETTE[ color _token] }` brokes every magic and ships all 3MB CSS design system on every page cause he puts every possible variant style into the CSS bundle also if it's not user dynamical. So now using styled-vanilla-extract with plain CSS based on material design 3 with qwik city and tailwind is used as CSS docs. Nothing more than a good quality CSS wallpaper shortcuts as now.

Where does Tamagui fit in this venn diagram?

EDIT: I suppose in-between Style Systems and Behavior Libraries.
Though I would personally prioritize same codebase for all platforms + web over CSS idealism. So Tamagui seems like a better choice.

What a great informative video it is ❤

To be honest this video is kinda infuriating because it’s clear that the author haven’t actually experienced other tools, which leads to just a biased “why you should use tailwind in 2023” video.

Having used Tailwind, Chakra UI, MUI, pure styled-system, and other tools all in production, I can say that the only thing right on this video is the review on MUI. It really is a nightmare to work with.

What about Panda CSS?

So you say component libraries like MUI is limiting your CSS flexibility, then what is Chakra-ui even though you mentioned it slightly? Technically chakra allows you to apply vanilla CSS as you write components for your react project and you can even use tailwind. Yes you may have to learn 1-5 common components that basically represents simple html like 'divs'.

looking at your github i wonder... why do you talk so much game when the sites you deploy look like garbage... i don't think you've seen what MUI is capable of...

Why nobody is talking about how he look so much like tom cruse from mission impossible 😂♥

ICT🌤️10AM Jul 8th 2023

This video helped me decide to fully commit in using tailwindcss. Thank you for sharing your knowledge.

Where's the antDesign???

fully agree with a lot of your points, especially around the problems with using component libraries etc...
however i completely disagree with the idea that inline styles are good.

I think that semantic class names and scss styles scoped to a reusable component is the most developer friendly in the long term.
if i come back to some code after a few years and I want to understand what it's doing, I really don't care about the colour of the text, or the padding of a div, it's useless and distracting. what i want to know as i'm scrolling through is: "this is the popup container", "this is header", "this is a table of user results", "this is the cancel button", etc... then if I need to change or debug the styling, i can go into the scss file for that page/component, find the class and change what i need. and i know there's no weird or unexpected interactions because all the styles in the system are scoped.

and when it comes to "speed" it's just as quick to write the style needed in an scss file as it is to write it in the class field

I totally agree, IF you have the luxury of time to build your own component library. Otherwise, if i'm in react and want to move fast, MUI is my go to
Keep in mind that i would always go to tailwind outside of React, as there's just no other library that offers this level of customization like MUI. And yes, MUI is FULLY customizable, and the limitations? Read the docs 😅and then tell me if you find any

I also have the team license its amazing

Ok fine. You’ve convinced me.

mind-blowing, thanks mate, completely layed naked each of it. appreciate it

Thank you very clear

I think the group “style system” falls short. For isntance: Bootstrap is mostly for layout and positioning. Styling is just a small part of it. So I’d say: let’s call it a layout system.

Just started to hate mui. You pushed me over that cliff!

Guys I think he likes tailwind

Normally I agree with you, and find your content accurate. But I disagree deeply with your assessment of Chakra UI. I've been doing CSS since it came out, and I have seen libraries come and go. Back in 2006 I even implemented a crude tailwind style system for our site at the time. It's gratifying to see others make a better version of it, but, there is a learning for any system, especially annoying when you know CSS deeply, as I do. When you are used to writing plain CSS it's annoying to translate that into tailwind speak.

The advantages are obvious though, since you can quickly build out a layout without having multiple files, and it's fairly standardized, (for now, 2023). But, Chakra has a killer feature not seen in others, you pass properties directly, and you can do this as an array, so it applies at different media widths, example: width=[ 12, 12, 24 ]. This is a very cool idea. leagues better than having to learn the tailwind syntax. It sucks to be in the weird camp, but, this feature is amazing for being able to make layouts scale down.

There is one thing I find interesting, that could be the hybrid, which is uno.css. That allows for some of the same functionality but with tailwind syntax. But, alas, I would prefer the full css syntax if I could get it. Keep up the great work, I'm learning much from you, just take another real look at Chakra.

MUI always feels like a solution and then i get frustrated 5 minutes after i yarn add it

Amazing out-class explanation ♥

I use `twin.macro` and love it

Do I hear Murcof?

Thanks!