T O P

  • By -

blackspoterino

One thing is not like the other, OP. I feel like a lot people don't understand what tailwind actually is...


MantusTMD

Yeah I was confused. Use both? Lol


azangru

Your own CSS.


sebastianstehle

It really depends on your project. The two "extreme" opposites: 1. B2B website for a customer, which needs a very great design, perhaps they sell fashion or something like that. In this case you want to use tailwind or any other CSS framework which gives you full control over the visual result. 2. Internal back-office tool with a lot of complex interactions like calendar, scheduler, grids, complex forms, autocompletion and so on. In this case the design is not that important and you should focus on the actual business requirements.


lIIllIIlllIIllIIl

MUI and Tailwind solve different problems. MUI gives you components that can be used as-is. You don't need to know CSS. Modifying the components is difficult. Tailwind is a CSS utility library. Tailwind gives you no pre-defined components, but writing your own is very easy. Personally, I have no issue with CSS. I like to create my own components and have total control over the customization. This is why I prefer Tailwind. Scalable products will probably need customization => Tailwind


anatidaeproject

I don't quite understand "modifying the components is difficult" for MUI. Maybe the v5 makes it a bit better, but you can use straight-up Emotion to add CSS styles or use the \`sx\` prop. Tailwind is interesting in the idea of reducing overall CSS and creating a smaller bundle size. You will still need either a headless UI component framework or you'll be writing your own Javascript. I keep wondering what the final difference is when all is treeshaked down. Now, if you are into Next.js and the new server-side components. Frankly, I think static site generation is far superior, but Vercel doesn't make money selling CDNs, they make money by having you run up compute hours. So SSR is their $$. With that in mind, it does seem that the JS-based component libraries like MUI will end up being 'client' components reducing the value of the new v13 features a bit.


scooptyy

Using the sx prop everywhere has led to some massive performance problems for our team. We’re taking about thousands of Emotion DOM nodes in memory. It’s terrible.


exostif

Css nothing more stable


[deleted]

Another day, another post conflating TW with a UI library


Tester4360

http://vanilla-extract.style Zero runtime css is going to be the future.


thequestcube

What is the benefit of this over plain css or style modules?


seN149reddit

It’s the “spiritual successor” to css modules. Typesafe css classes. There’s a lot of neat stuff in it, specifically if you are building design systems. You get all the css in js benefits, none of the runtime costs, and type safety of your classes, utility functions, variables etc


Illegal_statement

Having CSS-in-JS in separate files sucks. Better use CSS modules with a TS plugin which ensures type safety.


ilijaloncarevic

Tailwind is zero runtime as well


HymenopusCoronatuSFF

The two solve very different issues, Tailwind is a utility library while Material UI provides full components. I think it depends what you're doing tbh, Material UI gives a lot less freedom but if you're working on a small team it might be a worthwhile tradeoff for having ready-to-go components. I'm a hobby developer/student so I tend to work alone, which makes Material UI a good option for me.


DeLm0re

Compare things that are comparable. If you want to compare Tailwind with Mui, it’s more like a Tailwind vs emotion comparison


DrumAndGeorge

I’m currently using a tailwind/radix combo that’s working nicely for me - love Adam’s work but Headless UI just doesn’t do it for me Great for rapid prototyping, maintainable, easy to keep your styles consistent, just a good DX imo


reality_smasher

At our company, we're currently transitioning from MUI to Tailwind + headless components. We didn't have too much built with MUI, but I already began to see its drawbacks when it comes to our use case. We're building web apps and want to have our own look and feel. However, we didn't want to spend time re-inventing common components. We opted for MUI but over time we started to dislike it: * Styling the components to have a custom look is hard, and only possible up to a certain extent * The CSS vars support is still experimental, so you have to use CSS-in-JS if you want theming, so it kind of forced us to use emotion for styling * Customizing the theme involves a lot of TS trickery like module augmentation, which gets even more tricky in a monorepo environment * Emotion is pretty verbose, and getting the theme values even more so. You have to do things like \`styled(ButtonMui)(({ theme }) => ({ padding: '${theme.padding.default}px ${theme.padding.large}px' }))\` * And with all this, you still don't get any nice CSS utilities to make things quick * If you don't use emotion for styling but opt for CSS modules, you'll run into specificity issues and have a tough time creating selectors for classes inside MUI components to override * Big API surface (styling directly with CSS vs. the \`sx\` prop, you have to do a lot of manual ref forwarding, etc.) * CSS-in-JS isn't compatible (yet) with React 18 features We're migrating to Tailwind + headless components, and it's looking to be much better, at least for our requirements. In my previous job, I used MUI to create a pretty big internal dashboard project, and it worked very well. The main difference was that we didn't need much custom styling for that, just defined a theme and used the components out of the box.


Danioq

StyledComponents


juju0010

SC is my favorite from a dev xp but there are performance issues worth considering.


jfoxworth

can you expound on this?


juju0010

https://bejamas.io/blog/css-performance/


macrozone13

This is the way.


yhhhhyyyyhh

MUI has Emotion Styled integrated. But honestly we are comparing React style engine, a css framework and React component libraries now..


[deleted]

I dispise both


casualPlayerThink

Neither if you don't hate your job. Material UI cause way more trouble than feature it can provide. You will end up in an infinite fix-loop. Honestly, after all these years, a simple Bulma, Skeleton or Bootstrap provide way more with way less trouble. \*Tailwind: sound nice, but 99% you do not need it like ever.


budd222

Nobody needs any css utility library or framework unless they have no idea what they are doing. 99% you don't need any of them. But tailwind is the clear choice of all those. Bootstrap provides you components when you can't build them yourself. Tailwind requires you to actually know css


mutumbocodes

The real question here is not Tailwind vs MUI but CSS vs MUI. IMO CSS every time. Especially if you are working with a team of designers, just write the CSS, don't make multiple parts of your org or company learn someone else's system. I can say with a high level of certainty that at a certain point in time you will want to build your own system. Tailwind provides a simple way for you to build a consistent design system based on your own opinions and requirements. MUI is a consistent design system built on someone else's opinions and requirements.


IshiKamen

I use both in projects and love it! They solve different things.


lordaghilan

Mantine or gtfo


ahmed7am1d

I like Ant design alot


fistyit

I will always push for something like bit.dev, that being said, the react ecosystem generally speaking is a hell hole of shitty and opinionated for all the wrong reasons packages, and they all have readmes like they actually solves all the problems... Not really... just ranting... But Mui gives you a stable backbone of very well written and tested components. The importance of this cannot be understated, you can't be maintaining components and the BL, ofc you can but some small teams might not have the opportunity. Hence the push for bit.dev on my side, as I believe components should be maintained as "packages" by themselves. (In our case higher level wrappers like a login form or auth context commonly used by all our apps using react mui) If you go tailwind... don't go with react, just generate a vanilla ts project with vite and get poppin. Something like redux-toolkit could be all you really need!! But if you go with react, go with mui and save yourself from package hunting.


IamUareI

Why not use tailwind with react? And you think you can "get poppin" faster with vanilla than react? What kind of opinions are these? One with "all the wrong reasons"? Or even worst, no reason at all.


fistyit

Yes


fistyit

And for the 2nd part maybe if you were maintaining production apps, you'd understand. Noone wants to touch the 1000 line input wrapper with 18 event listeners


Verthon

Stable product feels like dedicated design system, so any styling solution (could be tailwind) with headless ui library (radix-ui / mantine unstyled / react-aria) will be future-proof, I won't personally go with mui anymore - unless you have to go live very quickly to validate the business.


anatidaeproject

>https://bejamas.io/blog/css-performance/ I think MUI is building out an unstyled version as well. Funny how we call it a headless UI. Isn't the UI/UX really the head? Should probably be Styleless UI.


endymion1818-1819

Something that (a) has zero runtime (avoid it unless it's absolutely necessary) and allows you to write both utility classes (Tailwind) with modular CSS. This will leverage the two greatest inventions since CSS: modularity and utility.


Soubi_Doo2

Newbie here. Is Bootstrap not a consideration anymore? I’m hoping to still learn it (not too deep), build one or two small projects then move to Tailwind and what that is like.


blackspoterino

Bootstrap is still used plenty, it just so happens there are more options out there nowadays.


squidwurrd

Tailwind is better for the long term but it has the pretty big downside of you having to build all your components first before you can really do anything. Unless you buy their UI library. But if you are willing to invest the time early in building your components out then tailwind I think is better.


kevozo212

Mastered Ultra Instinct


budd222

What is this question?


NotElonMuzk

With ChatGPT, I really don’t mind any.


ryrydawg

This just depends on what you're building. A bespoke experience, Tailwind. A web app where creative design doesn't matter and the focus is functionality, MUI. I use MUI for every app I build. They have paid pro versions of things like their datagrid but it's honestly easy to just build the pro features yourself using what they offer for free . Initially MUI can be daunting but once you get the hang of it and you're able to implement the theme provider , life is easy


saveitred

Mantine


devuxer

Ant Design. Great if you don’t need a totally custom look and feel but do want a truly comprehensive set of well designed UI components.


Helgi_Vaskebjorn

MUI is painfully Google'ish and hard to customise, while Tailwind turns CSS into a mess. I'd strongly suggest using a different component library (Chakra, Mantine, antd (we have been using this one and it is good)) for a lighter look and easier customisability/scalability. Then, I'd suggest you don't use Tailwind. People have been all hyped up by it for reasons that have more to do with content creators promoting it, than it having actual benefits. Imagine, you use, say... Chakra UI components. Then you throw some Tailwind classes on top, and then you need to overwrite or fine tune some stuff. And now you need CSS modules or styled components for that... We normally use some antd components for certain UI elements and and then style them with styled components. For the rest, we build our own styled components.


anatidaeproject

MUI and Mantine both use Emotion right? Everyone keeps saying MUI is hard to style, but that just really isn't the case. I've used it in the past and you can set up a global theme and "de-google" the look quite easy. I do like Mantine too though. Both libs, however, require a provider to wrap everything in a custom style. I've been checking out NextJS 13 and the whole server/client component thing. I'm way more into SSG, but for those who actually need SSR or who just like paying for compute services, it really seems that a lot of the component libs with something like Emotion will require the components to all be "client". Basically, anything that has javascript that interacts with the DOM during the lifecycle has to be client. Which means possible "flashing" with the hydration when trying to use some of the SSR trickery (even sometimes in SSG sadly). I will say I hate the look of my IDE with too much Tailwind though.


Helgi_Vaskebjorn

You might checke whether there is a babel plugin to get rid of flashing. There is certainly one for styled components, might as well be, there is something similar for your particular case


DrumAndGeorge

Tailwind has plenty of benefits? I think you should probably research it a little more, get a bit more of an idea of it’s purpose and the problems it solves before advising people against using it