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

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!

[@aron1016]

I'm the Creator of Master CSS, thanks for mentioning it! It's classified in a rather interesting position. Nice video again!

[@olatunjiolakunle6908]

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

[@neneodonkor]

@@olatunjiolakunle6908 it looks less cluttered to me.

[@teaman7v]

@@portalpacific4500 7:30

[@goosybs]

@@olatunjiolakunle6908 Funny thing happened, windi-css is now deprecated in favor of tailwind xD

[@arvindcool7994]

it is css++

[@chiragdahiya333]

Watched the video from start to finish, I'd have to say this is most all-encompassing perspective on front-end frameworks and libraries and how they work and behave in a production environment. After digesting all this information, I would say the point of diversion where opinions divulge about using c++ libraries or fully-baked component libraries is probably, developer's artistic inclination. After seeing you rant from 34:34 seconds straight I'd say you are very much artistic and creative in nature which is why you feel more relived having the control of stylising your components in how they look throughout your project. Which is why you prefer the freedom of doing whatever you want with the help of this straight forward approach towards right better CSS. As for the other demographic, instead of feeling the freedom of kinds of choices you have with styling each component in your project they are instead burdened by it. Which is why they'd much rather prefer having these pre-made stylised choices which are widely accepted, look decent and make for decent to good UI experience. Personally I prefer myself inclining towards Tailwind CSS. But in a practical world both ways of doing the same things are addressing the needs of different kinds of developers. It's a matter of personal choice make the choice you feel more excited about. Kudos to Theo -t3.gg for such an incredible deep-dive.🔥🔥

[@aaronmendez9284]

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!

[@tomjr.]

Agree! Adam should be taking note.

[@aaronmendez9284]

@@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.

[@owenizedd2830]

Take my 2 cents, what if he is sponsored in this video haha

[@SimonCoulton]

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.

[@romanmunar]

Even for behaviors? or do you use something like react-aria or react-hooks?

[@neociber24]

I like that until I need something complex like datepickers

[@thearcticmonkey]

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

[@MarkEdwardTan]

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.

[@Vorenus875]

@@MarkEdwardTan lots of places like where I work wouldn’t let you just pull in arbitrary library especially for a quick fix.

[@LcsGomes94]

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!

[@abdi165]

Your English is very good. Don't underestimate yourself

[@matchos]

fi, se você escreveu isso sem tradutor, você é fluente

[@mrSargi7]

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

[@t3dotgg]

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 😳

[@BrentMalice]

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

[@moodynoob]

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.

[@TheXavier99999]

Great vid

[@jewish_ai_music]

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

[@codewithguillaume]

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 ! ❤

[@codewithguillaume]

Here's my video reaction : kzbin.info/www/bejne/sKTbiH5_icqWfaM

[@shrin210]

Is the datepicker, timepicker & calendar better than mui for Tailwind?

[@AmazingPotatoFarmer]

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.

[@ophirbucai]

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! ❤

[@manasnagelia]

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.

[@ahhhhchoo]

Mantine phased out emotion and now uses CSS modules (recommended & well documented) *or* any 3rd party styling solution or native CSS.

[@Euquila]

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.

[@joshmerrell5359]

Thanks!

[@jacoblockwood4034]

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.

[@VilleTakanen]

Thanks

[@mazal-bb]

A+ content, man. I've been watching your vids for a while. I love a lot of your work simply to absorb the domain space and for entertainment. "I Ranked All 142 HTML Elements" made me groan, but I take it as satire. But this video is so genuinely helpful (for me) that I kind of disassociated while watching. Seriously. I had to stop at the 10:37 mark from my brain going, "click," "click," click." I'll go finish watching, but I just dropped in to appreciate. Categorizing CSS technologies by function and relationship is critical to choosing the right tool for a project (plus skill set). I would love to see more "big picture" connection content for other technology domains.

[@mazal-bb]

I should say, "Categorizing CSS add-on technologies…" or your term, "CSS++." Or whatever. cheers..

[@WebDevJapan]

omg at 32:35 about dealing with a UI bug...I feel the pain, even in MUI. It's so true. I might have to start using Tailwind. But I work at a small start-up of mostly backend devs. I'm the only fully front-end guy.

[@wcuribe]

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.

[@santinetwork8497]

A very comprehensive comparison about the different solutions to approach the CSS for your application. I love the drawings you make as they help understand the concepts you are trying to deliver. Great stuff!

[@pdevito]

Fwiw, you can customize mantine components with tailwind which is nice to not reinvent the component wheels

[@FroboDaggins]

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

[@theklr]

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

[@sun33t]

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.

[@michaeldausmann6066]

good content, no wonder I was confused so much stuff and so many approaches in this space. Thanks.

[@bmarvinb]

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.

[@penksantuyyy9519]

can't agree more

[@kr30000]

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

[@ΣτάθηςΣταθόπουλος-σ7ρ]

Sounds like a skill issue

[@melaozhu]

Agreed with you, former fan of tailwindcss, but now have moved to Radix-UI and stitches

[@WarframeCrunch]

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.

[@MarkJaquith]

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.

[@froxx93]

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.

[@abdelmomen1985]

Recently in my last project I use mantine combined with tailwind, mantine gives me the components i need while tailwind gives me the ability to style them the way i want , surely there are some conflicts but so far i'm satisfied with this approach

[@KWerder92]

I am using mantine as well, thought about using it together with tailwind. are there some downsides?

[@code-ge]

Wow. Would try it out in my free time. Just one question, how do you handle conflict resolution?

[@Maaaaars]

That’s interesting! I didn’t know you can style the mantine components using Tailwind

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.

[@t3dotgg]

Good take

[@elab4d140]

I think mantine is often underrated a lot, it has everything you'll ever want to build. and it is built with typescript !

[@ibrahimmohammed3484]

and also everything is simply customizable and themable !

[@greendsnow]

yes why didn't we see it hear?

[@itsMapleLeaf]

@@greendsnow 7:45

[@greendsnow]

@@itsMapleLeaf yes he mentions it for once. I don't see it in the diagram. He didn't make an analysis on it.

[@vibrantneon.]

@@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.

[@youssefaserrar2001]

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.

[@alexzamora9843]

I understand that if you want to use server components (Next 13) you can't use MUI because it uses hooks inside

[@MusicMan121]

MUI a lot of customization? hahaha, it's a pain in the ass to customize...

[@youssefaserrar2001]

@@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.

[@wagnermoreira786]

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

[@MarkJaquith]

You can put in arbitrary CSS since Tailwind CSS 3.1.

[@matteoalberghini2040]

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

[@emab]

I’ve started using chakra on a personal project and love it, especially the way they handle styles and breakpoints.

[@onça_pintuda999]

@@emab breakpoints in chakra is kreygasm

[@sougataghar1179]

@@onça_pintuda999 Kreygasm indeed , nice to see a twitch user here FeelsGoodMan

[@jamess.2491]

yeah whenever I do a freelance project Chakra is my go-to, just makes everything so much easier and the customizability is insane.

[@tomb5415]

@@alexandrenicolas4314 100%

[@guiiimkt]

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.

[@t3dotgg]

Those same docs are written using Tailwind ;)

[@onça_pintuda999]

@@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

[@DaveTheDeveloper]

@@onça_pintuda999 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

[@guilhermehenry60]

@@edwardroh89 i

[@leonnoirsr]

I learned Chakra UI in 3 hours. It's by far the best design system I've come across.

[@TheSirOwner]

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.

[@abcdmku1]

This is a great explanation for why we chose not to go with tailwind. We customized bootstrap to match our branding. (Which isn't as hard as it seems when looking at the generated css 😅, bootstrap documents the variables available to override the default styles) By having a well defined style system, our devs can focus on implementing features rather than reinventing the style 12 different ways with tailwind. Of course you can make the argument that you can lock down tailwind and limit the number of classes available so the dev doesn't have to align elements at the pixel level for example. When there was "too much freedom" in the design system, we noticed minor UI differences across our applications. This becomes more prevalent the older an application becomes, and more teams that work on these apps.

[@kollabor8]

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

[@u_ahimsha]

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

[@brunomendoza5478]

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!

[@TheIpicon]

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)

[@kszywy94]

these are provided by the browser, try inputs with type="color" or type="date"

[@TheIpicon]

@@kszywy94 You can't customize them to the level of precision you’ll want

[@TheIpicon]

Like choosing a range of dates

[@goodbarn]

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

[@heroe1486]

I guess Tailwind took its place since it's the same concept

[@subzerosumgame]

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

[@skalskaga]

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 🚀

[@dyrellius]

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

[@shixxor]

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.

[@skalskaga]

mixing styled-components with tailwind seems to be the biggest mess in styles I can imagine 🤯

[@anhtrinh8511]

Haven't seen any mention of CSS Modules - which I think is amazing. I really like its scoping capabilities so I don't have to think a lot about naming stuff, ie... when developing a component, I always use name like wrapper, item, list etc .... without too much worrying what else do we have in the system. Also, we can add typechecking of classes within React component, and lint rules about unused classes as well. I often have an duo: MyComponent.tsx, MyComponent.module.scss and so on, works well for me so far. For UI libraries, I like BlueprintJS, their code base / API are all very great, understandable, nothing too crazy like MUI. I'm in the middle spectrum, so that serve me well.

[@paul1]

There is a library tivac/modular-css that I really like for this

[@ronaldbrunsen]

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.

[@JamesGill-vb8to]

Id love to hear what your thoughts on something like JSS are. Ive always enjoys the DX of being able to have a co-located dedicated file that handles just the the styling (a la compontent.styles.js), and a set of js constant definitions (colors, typography etc.) that they can import from if they need access to consistent values. You essentially write CSS, with the power of JS, hoisting consistency, separating concerns of your render block from your styling, and can apply eslint/prettier rules that order values/make line lengths not grow huge

[@michaelczolko6093]

Díky!

[@criiptico]

Honestly this is a great intro to learning the different frameworks within web development. Nice video.

[@makelsevilla]

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

[@YeetYeetYe]

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

[@jauho87]

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!

I'm thinking about using Bulma. I have no time to write the whole CSS by hand, but bootstrap is to heavy for me. And I want to write not from a library (like MUI).

[@linkfang9300]

My personal thoughts for styled components, instead of MUI, Ant Design might be a better choice for most people. Because it supports more features than MUI (especially the table and date picker), it's easier to use in most cases and the table works more efficient and have a better looking filter UI. I haven't run any benchmark on them (DataGrid in MUI V.S. Table in AntD), but I do have them both on a same page and update the data of the table by clicking a button. MUI will flash on the page (disappear and show up again), but AntD will just have the new data displayed on the table. It looks way better than having the table flash every time when there is a new item being added into the table. And quite a few features on MUI are either not free or not supported. Like, multi-column filtering, row/column pinning(freezing), expandable row, search in filters, etc. For the date picker, MUI just have a basic picker, but AntD has a whole lot of different variants for different use cases, like a date time range picker, some preset time range, etc. MUI even won't let you select a month directly, but to use the arrow button to navigate to the month 1 by 1... Overall, the way MUI works is more to let the user put a bunch of its components together to create another component (Drawer component for navigation bar, or Table component in MUI, not DataGrid in MUI X). But AntD has most components wrapped up in a single one (Menu component/Collapsed inline menu for navigation bar), so the user just need to import a single component and pass in required props, way cleaner on the code level and easier to use.

[@kakak97]

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 =)

[@Metruzanca]

26:58 - Imo, fastest way to learn tailwind is with the intellisense plugin. Very few times did I have to lookup what word was being used for something as everything is very intuitive. The only things you actually have to lookup of course are special syntax e.g. px-[5em] or @layer components etc

[@GungooseHonk]

23:20 - just make general `Flex` styled-component and pass a prop which will be of type "left" | "right". So if in tailwind it's just writing a string, in styled-components it's just passing a prop

[@christiangrace5322]

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!

[@live_emulator]

This video really helped on making my decision on where to go next with UI libraries. Thank you for this!

[@ItsPureLuck27]

Coming back to this video after getting into Tailwind (love it btw), I feel like I remember him saying to not use NPM to install it in React projects (possibly misheard this). If this is true, why is this the case and what should we do instead?

[@t3dotgg]

You probably misheard - use NPM to install it but make sure it's a DEV dependency as the JS isn't included in the build

[@ItsPureLuck27]

@@t3dotgg Thank you! I remember watching this video a week ago (made me decide to learn Tailwind and thanks so much for that btw) and vaguely remembered that subject, so just wanted to clarify!

[@danburton720]

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 👌

[@Fhunter1234]

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!

[@freyfrenzy]

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.

[@ahmedmusawir]

Nice, clear English and honest! Perfect! Someone without a foreign accent ... this is getting harder to find in tech these days!

[@MohamedElmardi123]

One annoying thing about Tailwind is when you read your teammate's code and there is a giant line of inline classes it distracts you I found one great extension in VSC extension called Inline Fold that "folds" the classes into "..." so it looks less messy

[@abadan2014]

ay, thanks mate

[@JoLXBR]

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!

[@SaiCoder]

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.

[@msich]

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!

[@arjundureja]

Flowbite is awesome

[@swtmply]

I use mantine and tailwind as my "UI" libraries. Mantine is really wild and I'm really having fun using it

[@ashleytwo]

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.

[@shashanksingh9118]

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 !

[@aidanbyrne8267]

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

[@heroe1486]

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

[@ahmadshiddiqn]

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.

[@wangyi8848]

Excellent! It can help me understand CSS and how to choose the right one.

[@krycekaiolfi]

That was a surprisingly good video. Great explanation on why UI libraries can limit the UX/UI you can create.

[@srenhyer3895]

One of the few times I agree with most you're saying. I'd be curious to hear your opinion on the CSS Prop from Emotion though.

[@hsjoberg]

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.

[@splitpierre]

I am a LAZY front-end dev, because I live on back-end land more, last few weeks I've been doing some experiments with tailwind/astro/solidjs/nestjs on a side project, and I'm amazed and having fun with them, built some components using tailwind and it was a pleasant/intuitive/smooth experience. Don't get me wrong, I rather go with a component system cause i'm just too lazy for css chaos =]. but daisyUi is new to me, looks good! Thank you Theo, for the content, and for helping me get up to speed with latest hot cool tech around.

[@trangcongthanh]

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.

[@oscarljimenez5717]

lol, this is so true

[@theklr]

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

[@mjcillo1297]

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!

[@Saradomin65]

Tailwind + Styled Components + Twin.macro is what we've been using so far. If I'm to have solo projects I'd probably use MUI (Would have gone with Chakra but the lack of components as compared to MUI is what's hindering me e.g datepickers), been also wanting to learn Mantine.

[@ongkay250]

I use mantine + tailwind + twin.macro 👍👍

[@Saradomin65]

@@ongkay250 Nice! I've also used Mantine + Tailwind and it's amazing.

[@Korutz]

It's a trade-off, on one side of the spectrum you have smaller pieces which are more customizable but take longer to assemble and on the other larger pieces that can be feature-rich, but clunky and not modular enough. Say you need to build a list component. And a form. And a modal. And some alerts. And have to do it all as quickly as possible. You're gonna work your ass off with just TailwindCSS. Which is basically almost raw CSS, but abstracted to classes. If you know CSS and you're completely new to TailwindCSS it might be even quicker to just use raw CSS, because you save the time for learning TailwindCSS.

[@AlAminKhan-on4ts]

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.

[@jangjaeung6556]

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.

[@HenrikVendelbo]

It sounds like you are discussing what I would consider library vs framework. Pros and cons, and why depending on third party frameworks constrains your future options

[@wattsfield1889]

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

[@gabriellinassi3382]

This was one of the best lectures about this subject I've ever seen. Many thanks!

[@JayJay-ku8gp]

Chakra is nice and react but as someone getting their feet wet in front end, it's been rough trying to learn react, chakra, nextjs, and trpc all at once lol. Im used to just Java, C, Go, python, etc. Web is just highly involved but it is fun.

[@berrywarmer11]

Hey bud, if you keep trying to follow all the hype that you hear from people like Theo, you're going to be burnt out in a very short period of time. Theo's 10 years of experience means more then you think it does. You should focus on picking ONE backend language and stack and ONE frontend framework + stack (includes UI lib here). You'll learn far more building a full software product by committing to a single stack and using it to FINISH your project then trying new hype every time you get a new video recommended to you by YT. Turn off that sub button and get to it 😄

[@JayJay-ku8gp]

@@berrywarmer11 oh those languages I worked on projects with other people or myself and it was much easier learning an individual language than a lot of stuff at once. See I'm coming from a more systems oriented background and some cyber security. Im used to just working with C, Java, Python, Go, Ruby, or Rust. All of these languages outside of rust and go I experienced in college and it was easier than to pick them up. Since I've been out of school and my career didn't take off, I can still do those languages outside of Rust and Go which I'm still learning. I did take some web development in college which was mostly Ruby on rails and for some reason Php always ended as my capstone in both colleges I went to. It's strange how that particular backend language kept appearing. My frustration with web is I think just too much to learn too quickly and my brain is overloaded. Probably doesn't help I lost programming time in 2020 due to my job and the pandemic and depression. I recently started my own web app using the t3 stack mainly Nextjs, Typescript, React, trpc, and I switched Tailwind to Chakra. Now I've never been good at CSS it just never clicked for me in life. T3 feels very different because I'm just used to Php and laravel or just plain php with some jquery. Im aiming to get a work from home job because the rest in my field required me to move far away and I kinda want to stay near my family in Kentucky. It's been very rough trying to learn React, Chakra, Trpc, and Nextjs at the same time but the experience seems good. Tbh I just dont know what to learn because my interests in web are new. I dont mind the struggles, but I feel like I need to do better and should be able to do better at this because I'm most likely overthinking it.

[@JayJay-ku8gp]

@@berrywarmer11 this really good advice. Here's some programming background on myself. I started in Java in high school around 2008 and used it most of my life and it followed me into college. In both of my degrees (associates to bachelors), I used Java, C, Ruby on Rails, and php for both my capstone projects. Php was really my only true web experience. Since family stuff happened right after graduation and then the pandemic, I ended up not getting into the field and working odd jobs to help family make ends meet. As of 2021 and now 2022, I've worked with python (pandas some, web scraping), React (currently), Go (helped with a discord bot), and rust (my next compiler project). My interests and experience is low level programming and some cyber security during my college days. Since those jobs require moving which I can't do now or a certifications I can't afford on my current salary, I thought maybe web could be my entry in. It's a bit of a learning curve since JS is a sloppy language compared to Java, C, Python, etc. I think I'm just overloaded trying to use an entire stack already with minimal knowledge. I'm currently using T3 stack to build a voting app and yes I'm struggling but I'm learning too. It was easier for me to learn languages before (mostly C family), because the languages are easier to focus on and you don't have to learn a bunch of other things at same time. Web feels like you jump around more in the knowledge so I'm slower at it. Rust also been a bit difficult to learn but it's enjoyable. I'm just hoping things to come together and lead somewhere. I know my life distractions are hurting my progress but it is what it is. I think my approach should be foundation before the house sort of speak. Start smaller then build up to projects like my current one. Jumping right in too soon is more of a struggle.

[@JayJay-ku8gp]

@@berrywarmer11 yeah my age is a factor too and I've been out since 2019. Family problems got me to stay home and help out but dev roles were a dud so I took on what ever job I could get and just work and talk to a mentor at said job at the corporate level on preparing for interviews. I am overwhelmed. I did get offers after graduation but they were startups out of state and no relocation help and I have 0 money to move and no working car at the time. Plus, my parents had stuff happened that required my help so things just piled up and I did what I could. Just gonna keep trying

[@HaraldEngels]

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.

[@YoussefNassim]

"brain locking" 🤣 no thank you, even more anxiety inducing than vendor locking for me

[@marekbee]

DiasyUI is worth checking out if you already use Tailwind. Also, from UX POV - avoid Material Design…

[@zocky3282]

Do you mean MUI?

[@marekbee]

@@zocky3282 I meant Material Design in general -> Material UI (MUI) is an open-source React component library that implements Google's Material Design.

[@zocky3282]

@@marekbee Oooh Gotcha 👌

[@olatunjiolakunle6908]

Vue SFC solve many of the concerns of tailwind, you can abstract your inline styles to classes in the style section

[@re.liable]

I regularly reference this video. For a while I've been building my components from the ground up but now I heavily use behavior libraries. For beginners I would still recommend building from scratch but moving forwards, at least behavior libraries should be used wherever applicable.

[@brennan123]

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.

[@Knigh7z]

Fucking love this video lol. Feels like a recap of my journey with front-end libs. At Facebook we had something similar to styled components but better (you didn't need a separate "component" for your set of styles). Similar takeaway though - inline styles are good.

[@Knigh7z]

Aaand, looks like they just made it public lol.

[@WillisJonny]

As primarily a designer (so take my thoughts on this with a pinch of salt), stitches is the closest to how I think most designers would think about building UI. Styling logic and behaviour logic aren’t the same. Having styled variants baked in instead of conditionally applying class names makes building a design system a lot more approachable. It also has inline css if you need it for making a simple flex box or whatever. I found tailwind very clunky when you want to just have different flavours of conceptually the same component with just different alignments, colors… etc

[@derek123wil0]

also disappointed he slept on stitches and nextUI which is based on it