Comparing Modern CSS Solutions (Tailwind vs MUI vs Bootstrap vs Chakra vs...)
HTML-код
- Опубликовано: 4 окт 2022
- UI libraries are important! I think about them a lot and I hope this video helps you think about them too. Very very very overdue one.
TailwindCSS, MaterialUI, Chakra, Bootstrap, Radix, React-Aria, Master.co, and more 😅
ALL MY CONTENT IS FILMED LIVE ON TWITCH AT / theo
ALL MY BEST MEMES ARE ON TWITTER FIRST / t3dotgg
ALL THE COOLEST PEOPLE ARE IN MY DISCORD t3.gg/discord
ALL MY VIDEOS ARE POSTED EARLY ON PATREON / t3dotgg
Everything else (instagram, tiktok, blog): t3.gg/links
THANK YOU ADAM FOR THE EDIT! 
Наука
I'm the Creator of Master CSS, thanks for mentioning it! It's classified in a rather interesting position. Nice video again!
Nice work Aron, I just took a look at the docs now. It will be pretty interesting to see how help it stacks up against tailwind and windi-css
@@olatunjiolakunle6908 it looks less cluttered to me.
@@portalpacific4500 7:30
@@olatunjiolakunle6908 Funny thing happened, windi-css is now deprecated in favor of tailwind xD
it is css++
Tailwind should sponsor you man, you hit every note on this entire topic so thoroughly and that's quite difficult to do considering the complexity of each and every one of these tools and libraries.
Amazing content Theo!
Agree! Adam should be taking note.
@@tomjr. I'm just so excited for what the future holds. A video like this raises the bar and it's going to encourage us all to build better.
The future gets more exciting with every upload from this channel I'm sure of it.
Take my 2 cents, what if he is sponsored in this video haha
Always written my own component library for the companies I’ve worked for. Owning the UI is insanely beneficial when it comes to your problem space.
Even for behaviors? or do you use something like react-aria or react-hooks?
I like that until I need something complex like datepickers
Most companies don't have time for developers to reinvent the wheel building a custom component library. There are tons of behaviors that these libraries are already handling out of the box and building a good custom one takes a lot of time.
Using an already built component library helps a lot with starting developing your product, you just have to worry about custom styling most of the cases
Yes but sometimes when deadlines are fast and you just need a quick solution you can use UI components. Then later on if there's time, you can create the equivalent custom component.
@@MarkEdwardTan lots of places like where I work wouldn’t let you just pull in arbitrary library especially for a quick fix.
Your ability to explain very practically the differences, benefits and drawbacks of these different solutions is amazing!
Thanks to you I gave Tailwind a shot. I love it, because the biggest blocker for me in my personal projects has been styling (I detest CSS), and Tailwind has made it nearly painless.
I initially avoided Tailwind because a WebDev video said if you don't know CSS you shouldn't use it, but I found it actually helped me learn more about it.
Great vid
I watched this live and I swear this was probably the best piece of knowledge for any developer to choose the right solution for their project or company. Thanks Theo! ❤
I just want to say that I came to this video expecting some kind of tier list but I ended up learning a ton of things and concepts that I didn't even consider before, now I feel like I can take much better decisions on what to use. Thank you for making this truly amazing video!
This is a really good video! Thank you for making it. As you said earlier in the video that my view of the ui libraries and CSS are heavely affected and changed. I've been using MUI most of the times in the past and have gone through the problems you mentioned in the video. I love this video and would definitely suggest it to my friends.
Great video, man! Love how you break down each UI libraries and CSS extensions and how you share what you learned with your web dev experience. I'll definitely give Tailwind a go after watching this!!
I am amused on how incredible you are at explaining these stuff. You just made a brazilian that is not even at fluent english level completely understand everything about UI Libraries that I needed to make my choice on what to learn now on my path to become a front-end developer.
I've learned html, css and javscript so far. I was studying bootstrap, but I hated it so much, that I decided to do a research to see if studying it was a good move but now thanks to you I got my answer. After many hours of research your video was BY FAR the best video I've encountered.
You are amazing on what you do and you deserve the best mate. Thank you very much!
Your English is very good. Don't underestimate yourself
This was an excellent explanation of the distinctions and crossovers of all of these libraries. Thanks for taking the time to run through all of this.
Thanks man, after CSS I was confused which one to pick out & this helped on tremendous levels, breaking the topic out in the 3 core types made all the difference, yes the pros & cons matter but this mental model puts everything in perspective !
Hot damn 5 minutes in and you’ve already nailed my frustration in discussing UI libraries. I was in the anti-tailwind camp until I used it. It’s exactly what we wanted bootstrap to be and with the additions of using the modern css properties it allows me to design yesterday. I no longer have to figure out how to play nice with business and the component library
I too once disregarded tailwind, but after seeing you rant about it a while ago I decided to try it on an Astro site I'm making. In love instantly! Only problem is that sometimes the intellisense classname list doesn't show up always, and you sometimes do need to add some custom CSS. For example I was making a banner based on a logo that needed a conic-gradient, so I used custom CSS for that.
Thanks man this was super helpful. As a newbie all these libraries and tools get confusing but now it makes way more sense.
Watched this video some time ago when i was writing my own styles on scss, didn't understand anything. Fast forwards to now, decided to incorporate some css framework/library to speed up the development of a project I'm working on, and couldn't decide which one to choose. Your explanations made everything so clear now. Keep pumping these out man, appreciate your vids
This is so cool man. I have a few videos I regularly revisit to see if I “am smart enough to understand them yet”. Absurd I make videos like that now 😳
ur da real hero of kvatch. lot of the other people in comments have been helpful in guiding me to realizing why im wrong about stuff too. great community youve built@@t3dotgg
Probably the best developer content in youtube which was recommended to me by a friend, thank you for it! You're definitely making a difference and helping self-learners like myself to grow =)
Excellent work, thank you for the dissection, I've been very hesitant about moving from CSS3 vanilla, w custom props and postcss/sass, I've been slowly migrating to tailwind, you helped
We used Angular Material for a while early into some projects, and it led to nothing but pain in the end. Our design sprints were spitting out designs that the library just couldn't do, so we started hacking the components to look and act how we wanted, resulting in more complexity and wasted time. In the end, it became quicker to dump Material altogether, grab tailwind, and just roll our own components when we needed one.
A great video, just starting out my coding career and this video really allowed me to grasp how things work on a low level to understand what everything is used for. thanks!
33:46 From more to less freedom(more freedom also means you have to write more code)
1. Tailwind + Write your own style system
2. Daisy UI
3. MUI. Using MUI will make you better with it, but not better at CSS like the previous ones.
Theo, I just found out about your channel and I can't put into words how much this video helped me. I just started in web development and the crazy amount of confusion going on defining what exactly each library or framework really is and does, is staggering. After watching this I feel a lot more confident about how to approach UI creation. Thank you a lot again you just earned a longterm fan. I hope in the future you will release some kind of React course.
mixing styled-components with tailwind seems to be the biggest mess in styles I can imagine 🤯
I have to agree. Recently did a project and used tailwind for the front end because I find it easier to understand than vanilla CSS but gave me the flexibility to get the design in my head out there and the small amount of components (primarily a modal with a form in it) I just handled manually and used tailwind to style it. The next step is a backend for staff which I'm probably going to use Mantine for as I just need components and less concerned with making it look pretty. Although I am curious to hear your thoughts on Mantine though. Not tried it yet but heard lots of good things so I'll be checking it out.
This is the top video for understanding the current state of the CSS world. Great video. Just great. Exactly what I needed. However, one suggestion is to try out Mantine. I have been using Mantine for over a year now and I haven't ran into any problems yet. It also has React hooks for common things like modal closing, counters, dates, etc. Mantine is also based on emotion so you can customize the components. In addition, it has Mantine UI which is extremely similar to Tailwind UI, but it is free. I just felt like you assumed that Mantine is just like shitty MUI, but it actually isn't and is great.
Mantine phased out emotion and now uses CSS modules (recommended & well documented) *or* any 3rd party styling solution or native CSS.
You made me realize the reason why I struggle a lot to use and adopt any kind of external UI libraries, templates etc in the projects I've worked.
You just solved a msytery for me and made me feel very confortable about my decisions!
Great breakdown by Theo. The reason why I choose tailwind is just because their default preflight (spacing, sizing, color theming) is just makes sense. But then the more complex ur app gets, you’ll eventually have tu write ur own components, which is pretty handful if u working alone (especially as a freelancer who wants to get the job done quickly).
Either way, most of us will have to npm install those libraries. If u want the best of those (CSS + Behavior + Styled System), Tailwindcss with Mantine might provide everything u need, though they’re pretty hard to setup at first, but once u get them working you’ll love it xD
I love your videos man, so informative and simple AND entertaining to watch, keep up the good work man
Hello Theo.
Thank you so much for your videos.
I appreciate the way you explain things and all the informative stuff in your channel.
Love and respect from north Africa ❤️🙏
good content, no wonder I was confused so much stuff and so many approaches in this space. Thanks.
This video helped me decide to fully commit in using tailwindcss. Thank you for sharing your knowledge.
Great video, nicely explained. I absolutely love tailwind. I’ve been using it for years and it was a massive hassle to try and get developers to use it in the past. I had to spend hours upon our convincing and helping developers to understand why tailwind was good using all these arguments that you have used in this video. I wish this video had existed five years ago so I could’ve easily shown this to developers. This video is a great asset to have for front and developers designers and back and developers in the future.
Great video, for me as a beginner full stack developer I use MUI and I love it, it gives you lot of easy to use components with a lot of customization (for me it already looks good), like dialogs, dropdowns, modals, built-in styled Components, theming... so I can focus on other stuff. if you work by yourself and you are just starting your journey give it a try.
I heard lot about tailwind and I will sure give a try.
I understand that if you want to use server components (Next 13) you can't use MUI because it uses hooks inside
MUI a lot of customization? hahaha, it's a pain in the ass to customize...
@@MusicMan121 Yeah I agree it's a pain in the ass to customize, I don't use it anymore but I still like it. It's been 11 months now I use tailwind.
I've just stumbled here and oh man, WHAT A BLESS. I'm currently a full-stack intern SW (but I work mostly with front-end). I tend to notice that people are generally very neglectful on css and styling. I've always felt I needed some deep discussion about frameworks, practices and technologies in general. Thanks for the content, I'll be around for a long time!
Material-UI helped me a lot (coming from someone who isn't the strongest web-dev). I do understand that it is like a drug and can be difficult to get off of _but_ for my medium-ish sope project, my client and I are extremely happy.
This was one of the best lectures about this subject I've ever seen. Many thanks!
Holy shit. Thankyou man. I’ve learned React and the Logic goes here, styles go here, is so right. I’m a noobie fullstack dev that still uses Bootstrap for styling, but i will now move on and practice using Tailwindcss. Hope to see more of your content!
This video really helped on making my decision on where to go next with UI libraries. Thank you for this!
Such a great video. Totally agree and relate to every single point you made. Thanks :)
I did a lot of React Native + Web projects and used mostly Native Base, which is similar to Chakra. I would say they are similar to Tailwind as they are also utility based just on a higher level of abstraction, so instead of learning class names, you learn utility props. I like either one because they force you to make encapsulation on the component level, essentially as inline styles on steroids.
I had to use a few of these to properly appreciate your point that not all component libraries are trying to do everything or want to.
Great video
Great video, your point about building component libraries basically being the job of a frontend dev was too true. If you are not building it, you are maintaining it. You are interacting heavily with it. If you use MUI or other libraries, your job changes from making the components and putting together the UI/UX, to fighting with the library to work and look exactly as you want. Knowing what you aim to achieve when you're choosing the tech stack is important, and this diagram really puts it into perspective. Great stuff fr
congratulation on 100k 😅, I've written most of my css in Tailwind , today i'm learning material UI and immediately remembered about this video. I think i can decide of my own after learning MUI that which one suits me better, great content tho.
I've been doing web dev since 1995. I remember a time before CSS, and I remember when there was nothing except CSS. This video is so densely packed with wisdom.
Nothing is worth anything if it isn't maintainable. Everything else I've used has been a maintenance nightmare. Tailwind is a joy. Don't use a thing? Poof, it's gone. Want to edit a component? Edit the component. There are the styles. Change them. Nothing else breaks.
You have no idea what a revelation this is after ~15 years of "Markup, Styles, Functionality - never shall they touch" orthodoxy. It was always nonsense, but it had an appealing purity. Inline styles are good. Inline functionality is good. Components are the unit that matters, and building your own components is the way.
For me it depends if I am building something like admin panel, where you need lots of components for usability and design is not number one priority - in cases like this benefits of libs with ready made components (like MUI) outweigh the flexibility Tailwind brings IMHO, since you get much faster development for "admin" UI.
This is not true when you build design for end users, where things must look pretty, then I go with Tailwind.
Good take
I love tailwind. I really like it when I have to edit some code that looks like this
'block absolute py-xxs px-xs rounded-big border text-small group -translate-y-[2rem] -translate-x-1/2 shadow-250 font-sans font-bold cursor-pointer select-none',
'before:content-[""] before:absolute before:bottom-[-0.445rem] before:left-1/2 before:border-t-[0.385rem] before:border-r-[0.380rem] before:border-b-0 before:border-l-[0.380rem] before:border-r-transparent before:border-b-transparent before:border-l-transparent before:border-solid before:-translate-x-1/2',
'after:content-[""] after:absolute after:bottom-[-0.355rem] after:left-1/2 after:border-t-[0.375rem] after:border-r-[0.375rem] after:border-b-0 after:border-l-[0.375rem] after:border-r-transparent after:border-b-transparent after:border-l-transparent after:border-solid after:-translate-x-1/2',
Fascinating explanation, Theo. Love the charts you used to rationale your decision-making.
This was a really good video. You introduced me to a lot of libraries I wasn't aware of.😅
Can't wait to try them all😋
From my perspective Radix Primitives + Stitches (or vanilla-extract if your prefer separate file for css) for styling is the best, and yes I tried tailwind, but for complex styling it's get a mess over time.
can't agree more
Agreed. I've also seen a project that uses a library to "merge" tailwind classes, so that one tailwind class will override other tailwind classes.
It seems like a mess, in my opinion - plus it's additional JS that needs to be shipped just for that
Sounds like a skill issue
Agreed with you, former fan of tailwindcss, but now have moved to Radix-UI and stitches
I saw many companies in my country require tailwindcss knowledge while I was using bootstrap but only because it have some other usefull stuff, because I was using bootstrap classes but realized it is a bad practice if we use more than 3 classes in one element that is used several times, because if we want to change every element to different style, we now need to find everywhere it was used and change classes. So now I'm just adding my own Class and style it myself and if it's onlt different positioning in places I just add class like mx-auto or mr-auto so it adds margins to set element to center or right. So now if I want to change style of that element I just have to change styling of my one CSS class and I don't need to find all those elements in my files site.
great video, well I'm sold. I already dropped component libraries for these mentioned reasons and have been using vanilla css/modules. However everything is so hard to manage jumping back and forth to each sheet. Makes the most sense to just put all the styles in your code.
as a longtime Styled Components enjoyer who’s been out of the web game for a few years, i love your takes here. you’ve convinced me to try Tailwind.
I always loved making things and stuff from scratch, but at some certain point I was done with css-ing and repeating myself by typing the same css properties over and over again and I wanted to focus on pure functionality for my projects, so I tried one UI lib...2nd one...another one...almost every single one possibly available in front end ecosystem and I always had the same problem... I was spending 99% on figuring out how to use the ui lib instead of building the functionality... i realized after a while that in the time i was trying to figure out whats up and instead of fighting with the ui lib i could already have made the component by myself from scratch in tailwindcss and prolly already writing/finishing functionality for the component also there was and is something that annoys me in every lib, i feel really limited and "structured to one way of look or how to use my own components". So i tried solutions like daisyui... but then i ended up in the same place...so i drop down the whole piece of sh*t and moved to pure tailwindcss with styled components for real all those ui libs is like learning new framework or sum shit, but the difference is that they all different... even theming or styling is so hard to change in them.... I wont ever bother myself with ui libs, only tailwind + styled components since then I wanna have control of my whole app components, not being limited to ui lib creator solutions or ways of how something works or looks etc."
*Great video, much love. Tailwind is the power!*
I am using Tailwind / HeadlessUI everywhere now and I finally know how to explain to my Backend engineers the reasons why, Thanks, great video as always
I personally use both tailwindcss and react aria in my projects:
tailwind to handle the styling of everything,
aria to solve the behavior of everything.
I chose tailwind.. well because of you 😅
aria because it had the biggest quantity of hooks and components I think from headless or radix,
like datetime or color pickers which in my previous project I had to download a separate npm package for each one of them, which I didn't like.(I personally think it should be provided by the browser)
these are provided by the browser, try inputs with type="color" or type="date"
@@kszywy94 You can't customize them to the level of precision you’ll want
Like choosing a range of dates
really good video. You have amazing clarity of mind about those libraries.
LOVED this video! Amazing breakdown of UI libraries currently
thanks for always clearing and explaining the big picture.
Excellent! It can help me understand CSS and how to choose the right one.
great video, love the way how u show examples
The big problem with tailwind is that it cant do all that CSS can do right now, so you are forced to still use scss or styled for the other CSS features that it doesn't support
You can put in arbitrary CSS since Tailwind CSS 3.1.
I wanted to get a quick intro to how these styling systems work and improve the development experience. Thank you for this wonderful explanation
Amazing video.
Personally I’ve been working A LOT with tailwind and it’s true that to create a sustainable design system it is by far the most efficient.
But honestly Theo, nowadays, most of the SaaS companies don’t need to waste time on creating a design system. So these one just need a MUI library.
So I am in between !
❤
Here's my video reaction :
ruclips.net/video/zsxWKITecGA/видео.html
Is the datepicker, timepicker & calendar better than mui for Tailwind?
Honestly this is a great intro to learning the different frameworks within web development. Nice video.
very interesting. Didnt think about this till now. Thank you.
I was working with tailwind on lot's of projects and now i switched to normal scss and the BEM pattern. Super happy with the flexibility clean solution and speed.
The "Yeah don't use bootstrap. It's 2022, you know better..." made me burst out in laughter.
I still use some bootstrap-based libs, but got a hang on tailwind and tailwindUI thanks to Theo, and I gotta say, I can relate by now.
Bootstrap is still fine for what it is, but there are better options today.
Great video, i'm not a react developer but i've learned a lot. Btw, some of your pains can be solved by decoupling the logic in different pieces, or by using vue
0:00 Experience with UI Libraries
1:28 Types Of UI Libraries
- 3:56 Tailwind vs Bootstrap
11:55 Capabilities Spectrum
16:00 Radix UI
17:04 Chakra UI
20:56 Styled Components rant
28:40 Breaking up styles from components
34:11 Conclusions
I think mantine is often underrated a lot, it has everything you'll ever want to build. and it is built with typescript !
and also everything is simply customizable and themable !
yes why didn't we see it hear?
@@greendsnow 7:45
@@itsMapleLeaf yes he mentions it for once. I don't see it in the diagram. He didn't make an analysis on it.
@@greendsnow Based on the video, it feels like he basically covered it when he was referring to MUI, that's why he put it in Component Libraries. I don't know anything about Mantine, but he tries to put the pros and cons of tech in something easily digestible. I'm sure if you ask him in his stream if he thinks they are the same he'd answer.
That was a surprisingly good video. Great explanation on why UI libraries can limit the UX/UI you can create.
Tailwind keeps spacing and color palettes consistent, I can only think open props would be my alternative (but like you said it is further from the component I am Working with) . If all you need is an interface for your backend and you have no intention of designing your components that’s when you reach for those other component libraries.
THANK YOU so much! I have to admit I got a little anxious yesterday when I was thinking about a good way to style my React app. I'm not a very experienced developer and still in search of my entry position. I used MUI but exactly for the reasons you mentioned I didn't like it at all. Thinking about all these different libraries I got frustrated and lost but you brought some needed clarity. Thank you so much!
Flowbite would be a pretty cool addition to this list. Personally, I am a Tailwind UI subscriber, but nice to see some competition coming into the space!
Flowbite is awesome
The thing I don't like in tailwind is the class name convention :( justify-content: center -> justify-center. But align-items: center -> items-center. Damn it! I added alot of align-center in my side project.
At work, our company is working on a project with highly customized MUI. Then the MUI upgraded to a newer version without backward compatibility. We're crying every time we need to touch this project.
lol, this is so true
It makes sense over time, it’s neutral for both flex and grid and eliminates confusion for memory, but all UI libraries have learning curves
Great insights and you inspired me to take a closer look at tailwinds, because a lot of your comments re: component libs resonated with me, and I feel they're great to get started with but a lot of their benefits (easy to learn and get going with => saves time) start to unwind once project adances, and time spent figuring out to work around the framework. Tailwinds feels liberating by comparison -- not as turn-key (even w/ using tailwindui). Another issue w/ component libs is added fragility integrating w/ other frameworks. E.g., MUI is busted right now if want to use with Nexttjs appdir (due to dep on emotion). Granted, appdir is beta, but no issues using tailwinds.
I am one of those React devs comming from the backed world, I am inclined towards using UI libraries because I suck at UI,
Thanks for giving a solid prespctive of the ecosystem and guiding us in the right direction, I am definatly going to try out Tailwind css+, style system and behaviour libraries
As I feel I am a backend developer, I chose Bulma for my app. It feels like a better Bootstrap which is what I want because, like you said, I do not want to design my app from scratch. Bulma is a lot better imo because it allows you to customise it way easier since it uses SASS underneath and has a clear customisation system. This makes a huge difference because 9/10 times you will tweaking such a library anyway
ChakraUI is so damn good for accessibility, theme variables, media queries, also their css system is so good and it's very similar to how react native design system works, that's why a lot of people love it
They have components but are 100% customizable and you don't even have to write css for them, you can just change the theme settings
I’ve started using chakra on a personal project and love it, especially the way they handle styles and breakpoints.
@@emab breakpoints in chakra is kreygasm
@@joaofrancisco5781 Kreygasm indeed , nice to see a twitch user here FeelsGoodMan
yeah whenever I do a freelance project Chakra is my go-to, just makes everything so much easier and the customizability is insane.
@@alexandrenicolas4314 100%
Everyone sleeps on TACHYONs, but I learned it back in like 2017 as I was learning CSS / responsive design and it's simplicity was wonderful for helping me learn like core concepts and principles. It follows a fairly simple utility/atomic pattern and provides some playbook examples. But definitely doesn't get as much love for how much I love it
I guess Tailwind took its place since it's the same concept
Chakra UI is mentioned on the new React Beta Docs and that says a lot. It's really good and I'd personally put above Tailwind.
Those same docs are written using Tailwind ;)
@@edwardroh89 agree totally, Chakra is very flexible and easy to use. Never tried three or 3d, but im very satisfied with Chakra, using typescript and Chakra is very good
@@joaofrancisco5781 im actually using chakra and tailwind in my current side project. Tailwind is not necessary but I just have the freedom to use it if I want and it worked well together so far
@@edwardroh89 i
I learned Chakra UI in 3 hours. It's by far the best design system I've come across.
I've been hitting styled-component + tailwind, I think it makes sense for styled-component's ability to add css + tailwind classes all this being composable. And yeah the naming part really is annoying, having to name containers, divs etc, but. But with styled components you can also add inline tailwind if you decide to as well so it's up to you. I personally try to avoid for readability and reusability. WIll check tailwind UI too, looks nice
"with styled-components you can also add inline tailwind"?? tailwind itself is already inline stylings; besides don't you find it inconsistent to use both styled-components and tailwindcss in a project?
@@devviz Well, I didn't find inconsistent because you're basically just componetizing your tailwind code. But that's almost stylistic at this point
I am developing complex CSS since more than 20 years. All CSS libraries which I tried became earlier or later nothing else than headache. The only library I can stand is Tailwind. It works, is easy to maintain and doesn't force me to do things in an opiniated way. Especially the combination of Alpine JS and Tailwind CSS is great and makes me feeling comfortable with such libraries the first time after 2 decades. What I like is the quite low cognitive load of using these libraries. And having seen a lot of stuff come and go I bet that Tailwind CSS and Alpine JS are here to stay for the long run.
mind-blowing, thanks mate, completely layed naked each of it. appreciate it
The hate on chakra-ui is strong. If you have spent any reasonable time with it, you would realize many things mentioned here are just either misinformed or plain wrong.
If you know css, chakra-ui is a great life saver because it simplifies a lot of things but doesn't get in your way if you want to do any thing custom
The default components are well thought out.
It is also very impossible and tree-shakable. I was able to build a react-native design system using @chakra-ui/systems which is just one of the mini packages that make up chakra-ui.
If you need just a few components, you could just install the specific package for the components.
The themeing system is also pretty powerful
100% agreed. not sure why the hate from him on chakra but there really is no "learning" for the styling really. Been the best dev experience so far. I've tried material ui, chakra ui, and tailwind, and chakra has been the best so far.
Great explanation, really clear and concise. Just started my journey in web dev.
Great video! I'm always looking for the most ergonomic library, they all seem to fall apart when you try doing fancy stuff (except like tailwind and straight up SCSS).
Have you looked at Grommet at all? I replaced MUI with it, it has a limited amount of components it expects you to compose yourself instead of being "ready to go" like MUI. Seems closer to Chakra from what you showed
Really interesting video. We use MUI in our team because our app is fundamentally a dashboard app for use by clients rather than the public and they just want something that looks familiar and easy to use, so MUI gives us a very fast way to focus on our core competency of delivering this type of solution instead of what we had before which was a messy styled-components system. So yeah completely agree by moving from styled-components to MUI I feel like we moved into that middle area of the spectrum where everything looks "good". Doesn't look beautiful but it doesn't need to.
I would say the most powerful thing that MUI has given us is DataGrid. We have to display a LOT of tabular data and DataGrid gave us some really powerful features right out of the box.
Great vid 👌
I'm not a fan of having 1000 calss names in my html, which keeps me far away from tailwind, but when it comes to your other points, I agree with you 🚀
As a junior dev wanting to level up my css, this video helps alot, I have mainly been working with bootstrap, didn't really consider the limitations of boostrap till recently I had to build a nice looking UI I got my hands on, just thinking about how to attempt the app with boostrap I knew it was impossible. So it's really refreshing to get an opinion on whats avaliable, and rn I'm going tailwind, and not looking back 🙃, just need to get a refresher on some css 😁😁😁😁 so I can continue my work. Thanks 💪💪
Absolutely love the video!
You mentioned the architecture and pulling components from the `/components` directory and I agree it can be painful, but there's another thing that needs addressing - reapted class names all around the codebase and when you have to change how the button looks like across your whole app you need to go around, and make that change in every occurence of button.
I just wonder what's your approach. I do like the idea of having ui components spearately especially those heavily used across the app (like buttons, inputs, headings etc) and love how straightfoward it is in Vue that classNames are passed down to the child component.
Is having button child component that accepts classNames and chucks it at the end of it's own classNames list a good solution in React?
Great video! It helped me make a confident decision on which UI library to choose for my new project. As a backend developer, I found Material UI to be less customizable and not quite aligned with my vision of a beautiful UI. However, the combination of Tailwind CSS and Tailwind UI seems to be a perfect fit for my needs. I appreciate the flexibility and aesthetics it offers.
One could also mix css+ solutions with something like Mantine, Tailwind for most of the styling and Mantine for Date pickers, notification systems etc, and if you ever need to do some customization the library doesn't allow then you write the component by yourself, it doesn't cost much because the Mantine way was almost plug and play and I guess tree shaking does its job
it was intimidating for me to move from bootstrap/vanilla css to tailwind but as soon as i did it, i feel in love with it.
it's the first package i install in every project of mine, i love how tailwind lets you customize everything without writing 2345 lines of code like for bootstrap, just to replace the default style they applied to buttons for example
Great video. I couldn't explain it, but you did! Styled components looks eeek! haven't tried it but I know lots of people mention it. I watched this because I'm building a large personal project in Tailwind and with work, use MUI and ChakraUI and just started to doubt my decision a bit, also reading Reddit comments where 'x' is like, should I use Bootstrap and everyone jumps on and says 'Yes, it's the only way!'...As you said, it depends what your frame of mind is and what your goals are for the project. As you said, because I use Tailwind, I know CSS much better, which has helped use MUI and Chakra anyway, as you always need to add custom styling. From my point of view, I default to ChakraUI (smaller project, or small user base, i.e. admin dashboard) or Tailwind (larger), with Tailwind, I'm building my own component library as I need them. I'm going to need a date picker for a booking system and it was great to hear your comment on that as well, I think I'm going to install the one from Mantine, as there are other things in there, like hooks and form stuff that I think are useful.
Thanks a lot! Very helpful video!
👌you explained it very nicely. on point! 👌
I use bootstrap not just for the component but also the CSS classes, such as the display (d-inline, d-block), padding and margin, etc the same way you use tailwind. there are tons of one liner css class in bootstrap just like in tailwind, though in tailwind i see bunch of them more, and of course a whole lot tons more customizable.
Fwiw, you can customize mantine components with tailwind which is nice to not reinvent the component wheels
I really love your visual analogy style of teaching.
Very well put together and it was interesting to see your perspectives. They make sense if you want to build your own component library or have ultimate control over how things look but as a full stack developer and someone whose goal is to build a product I think MUI is the sweet spot for me. I'm not trying to win any design awards, I care more about getting a product to market as quickly as possible.
Seems like the approach you are advocating is: 1) master CSS, 2) build a component library, 3) build your application.
I just want to start at 3.
I'd be curious for those that have gone through 1 and 2, if they think they can now build new applications quickly and easily, or that I should still only care about Tailwind CSS if I want more control over my design.
I disagree that the JSX is where your styling should go. JSX is also used for the structure and layout of your component, when you combine styling in the same location it makes it harder to see either.
If my goals change and I want more control over how things look or if I find the component libraries missing baseline components I want to use then the approach you advocate makes sense.
I will say though, that trying to build new components that don't exist in MUI and keeping the same design can be challenging.
Wow. What a great video. Thanks!!