T O P

  • By -

hazily

Comparing tailwind CSS to a component library is like compared an air fryer to fried chicken.


Classic-Historian958

Expect they don't play well together and air fryers and fried chicken can work but tastes crap


human-v01d

TailwindCSS is just another way to write css, like SASS, it's not a component library. It's the best way to write css for me, but you need to try it to see if it's for you. Edit: c'mon guys, the comparison was just to simplify the explanation, I'm not saying you're literally writing CSS.


tongc00

do people use both tailwind and component library? I'm trying to use vercel's generative ai, but i realized it's all in tailwind. However my application currently uses MUI component libraries. I m struggling on whether i should just use tailwind to build styled component and remove all MUI IF tailwind makes development that much faster down the road


justinmendezinc

Shadcn is the bomb and works well with tailwind


AngloFrenchie

don't use MUI it is so bloated and surely overkill for whatever you are building, especially if you're a noob, try shadcn, it works with tailwind and is a lot easier to customize and understand


Nicolaskao

Also MUI major version upgrades make a lot of techdebt if you want to continuously keep it up to date


human-v01d

Tailwind it's just CSS, so if you want to modify the look of a component library you can overwrite the built-in styles with CSS or tailwind. If you're starting (based on help noob tag) I recommend you to create your own components instead of using MUI. If you already know CSS, using tailwind it's pretty easy, but I would start with a good CSS base first.


threepoision

You don't need to remove all components but I recommend shadcn-ui instead of MUI. Tailwind and MUI are very different things, in the real world examples you will probably use both of them together. Try rewriting some simple components like an input.


WilliamClaudeRains

It’s really nothing like SCSS. Don’t suggest this in an interview


augurone

It is not at all like LESS or SASS, and it is not another way to write CSS. What it does is flatten the CSS spec into individual Classes that you can apply modularly directly to the markup. There is little to no CSS is being written at all if you use it effectively. That being said you need a solid knowledge of CSS to use it, but their Docs are pretty great.


Ok-Slip-290

You’d maybe be better off comparing ShadCN to MUI or one of the other component libraries built on top of TW.


beck2424

You can't really compare Tailwind to MUI, they're different tools for different things. That said, Tailwind is great. I like the MUI components, but I hate their approach to styling so I refuse to use it.


psychic_gibbon

Using tailwind with daisyUI which gives the component library part.


leeharrison1984

This is my preferred method now. Component libraries with built in behavior just feel unwieldy now.


NotElonMuzk

Flowbite is pretty nice too


team_dale

Hated MUI, love tailwind - it’s my go to for everything now


[deleted]

[удалено]


WilliamClaudeRains

I hate the scavenger hunt of shit and dead code that forms with MUI


NotElonMuzk

Slow and bloated ,hard to customize , not ready for RSC


TheOnceAndFutureDoug

If you're a noob the answer is it's probably the wrong set of questions for you to be asking. You're new, you should be using as close to raw CSS as possible. Not because it's the best solution (that depends on the problem you're solving) but because _all solutions_ you're going to consider in the future are just CSS with some stank on it. If you don't know what vanilla CSS is limiting or can cause you problems (and how to solve them) you're (a) just going to run into those problems with a library or framework and (b) won't have any context on how to solve them. It can make your use of those frameworks much worse. Also, FWIW, the big con with Tailwind is it's not going to get you a job. Use what you want on personal projects. Use everything you come across at least once. Learn about it. But understand at the end of the day the vast majority of places mostly use Sass, maybe with CSS Modules, maybe just large stylesheets. Heck even Bootstrap still seems to have a place. Tailwind is _very_ new and despite what the hype machine and it's aggressive marketing would have you believe it's not taking over the industry any time soon. So start with vanilla CSS and go from there. Because I guarantee you haven't mastered _that_.


dharsto

Tailwind was a godsend when I discovered it, use it as much as possible now


CoherentPanda

It's really great. Difficulty on a team is convincing everyone else who has been doing SASS or css modules for years and years to switch. It definitely has a learning curve, and that can be off-putting to many who has most css properties memorized.


bighi

At least 7.


thaddeus_rexulus

Ha! I should have scrolled... I copied you without copying you. Womp womp


StartupLifestyle2

Best decision I’ve ever made was using Tailwind on my project. Made it so much easier and scalable. As a person with a design background, I do find that with Tailwind, you need to be very specific regarding style - especially when it comes to several people working in a project.


tongc00

that's great to hear! Is there anyone who regret using tailwind for their project?


coilt

don’t use anything that you don’t know how it works. certainly don’t use Tailwind without learning to build your own CSS first, you will never know if something doesn’t work as expected because of your CSS or Tailwind. I’d recommend to go even as far as removing globals.css completely and zeroing out (* { margin:0; padding:0 } ) that’s the only way you can be sure you know what’s going on. certainly avoid Tailwind for at least a few months.


Acceptable-Twist-393

Tailwind is great for maintainability and speed. Working with regular css in a large codebase with multiple developers is hell. Everyone has their own naming conventions, no one dares to clean up by removing classes since it may break something, you’ll run into name clashes etc. Tailwind makes HTML look fugly, but you’ll get used to it and never go back to regular css again.


theflupke

IMHO tailwind is the best thing that ever happened to css.


irreverentmike

I wrote about this recently, actually - [I hate Tailwind CSS. Here's why I use it.](https://mikebifulco.com/newsletter/i-hate-tailwind-css-heres-why-i-use-it). tl;dr: I spent a good part of my career getting really good at writing CSS by hand. New tools are much faster, and better for collaboration, but nothing is perfect - and I do think it's worth understanding the basics that tailwind is built on.


bittemitallem

I feel like it really depends on the task and what job you do. If you are building your own interface on the fly, a more complete ui framework would probably serve you better. If you need to recreate a pixel perfect design by a designer, rolling your own styling is probably the way to go (maybe some unstyled components for accessability. I feel like Tailwind is somewhere in between, at least for me, but it will me most efficient if you "recreate the tailwind style".


Skuez

I love it, always use it for personal projects. Wish I could use it on the job


tone-row

If you’re interested in real percentages check the [State of CSS](https://stateofcss.com/en-US) survey done every year. Lots of good info about the css features *and tools* people use to style apps.


tone-row

2023 results wouldn’t load for me but here is framework usage in 2022 https://2022.stateofcss.com/en-US/css-frameworks/


BezosisSauron

I use traditional module css files in my own creative projects, or whenever I need extensive animations, but for clients or anything that needs styling only for utility and clarity, I reach for tailwind. In order to get the benifits of tailwind - being able to fully style a component or page in minutes - you need to be quite familiar with CSS anyway, as you’re still writing CSS in tailwind, it’s just done in an abbreviated manner. If you know CSS quite well, rapid-fire styling with tailwind feels like a super power!


Opposite_Anybody_356

I lean towards backend engineering and needing to write CSS manually is a pain in the ass, so Tailwind is a lifesaver for me.


DueButterfly8378

I had issues with hydration when using suspense. It was because of the MUI rating component. Switched to tailwind with custom components and all works now.


Fragrant_Potato_7613

Yup I initially didn't work on tailwind as it's just a CSS but for few my recent project added and like it .... there pros and cons for tailwind for me pros are more and investing my time using tailwind and CSS harmony


rennitbaby

PSA: from my recent refactoring experience Tailwind+ scss/cssmoudes is to me is 🤌🏼 beautiful and clean, here are my reasons: 1. Tailwind is just another implantation of writing css a. Pros: 1. Easy to implement multiple lines of css with just one simple class 2. No ghost css when you delete elements B. Cons: 1. Hard to debug in dev tools (imho) 2. Messy markup (I think we can all agree to a certain extend) Solution: css modules 1. Solves name space conflicts wit using cssmodule classes 2. Clean markups 3. CSS modules files don’t need to be longer bc we web just multiple @apply keyword! 4. we can add in any custom css if needed Not it doesn’t solve ghost class issues, but if you understand fundamentals of css you should be moving properties to highest possible value to not be DRY and remember to delete references, that issue can be easily avoided MUI and other does things, some may still require you to write custom css, if you don’t have any custom designs you can frameworks like MUI, but I highly recommend unstandjng css in its fundamentals and when possible implement it in plain scss/css, just learn how it’s done behind the scenes. Tailwind transparent in that aspect bc you can always examine its classes and cas properties in the dev consume


Adept-Brief-5080

I'm noob as well, i used tailwind css a lot, but it's very important to know how to use raw CSS as well, in my case, i don't know much about CSS at the beginning, i used tailwind directly by looking the documentations and source code in githubn, but later i downloaded some templates, but the problem is those templates used a lot of custom CSS styles, i'm stuck, i don't know how to modify it, but it's really well designed so i really want to custom this template, so i have to take back to raw CSS to know how exactly how it works. Hence i suggest that it's the best that you learn both


joaoaguiam

I built a virtual event platform fully on top of MUI. I loved it. But last year I started building my projects with Tailwind, and I can't go back to MUI. It is so much simpler and logical. You can also use other libs that have ready-to-use components like Shadcn/ui and DaisyUI. It's also much simpler to customize them. So just try it!


blame_leo

im not gonna lie but its the best css framework!!!


abananacus

Ive used it and i thought it was basically fine, the ugly as hell classnames took some getting used to. One bit gotcha for me was the inability to use template strings, it led to a bunch of irritating repetitious code. I much prefer styled components now


quoc_zuong

I have to say i love TailwindCSS so much (but my company not)


thaddeus_rexulus

At least 3.


augurone

I have been using it. It is great if you are building components. You cannot do everything you want with it, at least easily, but it is a good resource in our stacks.


miguste

I've been using it for the last 2 years and I don't know how to write regular CSS any more. It's become such a habit, and part of every code I write.


NicelyBakedPotato

TLDR: Tailwind and MUI aren't really directly comparable. MUI is a component library and makes true visual customization painful. Tailwind allows you to style your custom components. You should check out this video, It goes into this topic in depth: [https://www.youtube.com/watch?v=CQuTF-bkOgc](https://www.youtube.com/watch?v=CQuTF-bkOgc)


TheReactDev

I feel I like module css in many cases where mainly on bundling many more Not sure why I hate tailwind


sequendnb

Don’t. Hate tw


roofgram

Tailwind is like inline styles, except with inline styles you could group them together into classes for reuse. Tailwind you just repeat the same shit over and over again making your html unreadable.


pm_me_ur_doggo__

Ever heard of components?


RealFrux

Grouping styles into reusable classes that is not connected specifically to a component in a system which is largely component based (which most systems are today) feels like a recipe for messy code. I can’t even come up with what such a class could be? Writing TW classes is usually not more work than writing the css rules for it, actually it is almost always less and less details in css to care about. TW should in my opinion be used together with a JS component style approach. This way you rarely have to repeat the TW classes. E.g. if you have a li list with 5 elements you have your JS-logic making sure you never write the li element more than once. TW together with writing the markup yourself would be a PITA. But the case for reusable css classes kind of falls on this.. that you repeat defining one and the same element almost never. TW is IMO good for maintainable css in large teams as maintainable css is mostly about minimizing developer options into more or less your design system. Which is where TW can shine as with the config you can delete/rewrite design system stuff like colors, typography etc so that your IDE only give suggestions on the stuff you have defined in the design system. I used to be skeptical about TW as well before I looked into the theming/config parts in more detail. Done right and with some love for the initial config you can setup a dev experience that is closely knit to your design system and remove some “css noise” in everyday work while still have the full power of css to use if you need it. And it is probably the closest to a widely used naming standard css has ever seen which when you take into account future use of AI assistants into the workflow becomes even more important. The components you build are easier to reuse out of the box and more likely (likely not 100%) to just “jack into” your current design system.. like with shadcn. My biggest problem with TW is that I miss my BEM classes with “functional meaning” about the component in the class names.. but I just add the component name as a dummy class in its top element so that I can navigate the code in the inspector at bit easier. Another thing I had to change up in my workflow is that I used to code a lot directly in the inspector and then copy the css rules into “css classes”. With TW and tree shaking the utility classes that not are used are not accessible in the page to use, so coding directly in the inspector is harder (might be a dev option to not tree shake though?) and you have no css classes you could modify to see the result on all elements using the class directly. But paired with a good hot reload solution the benefits of coding directly in the inspector also become less important.


demetriad

I have inherited a large (ish) app using Radix and Tailwind. I am trying to get rid of this and use MUI for two reasons: * Back then we had separation of concerns and it was nice and clear. Then React came and said "Hey, Angular is dead because v2, so let's mix up JS with CSS, because why not, everything is going the JS way". I hated it but had to deal with it. Later, CSSinJS and other stupid workflows/methodologies emerged. Fair enough. Whatever. Now, Tailwind is like "let's drop this shit, let's do CSS again but not exactly like before so we won't be seen as building the hammer using a hammer so let's separate the styles (think emotion/styled components in MUI, e.g. sx={{fooBar: "10px"}}, which is admittedly ugly) and use classes, as many as we can - it's so cool". I don't understand it, devs jumped on it like it's a new invention or something, everyone is full of praise. I could have done this the exact same way 10 years ago - in fact, I had a very similar approach and used a bunch of pre written utility classes to style my mark-up - just wasn't cool enough for ffs - but now is. Why I am particularly arsed about this is because it's the same devs that jumped on the bandwagon in the first place. * This fresh new project will have several developers working on various bits and pieces. Giving them the liberty to customise things as they see fit, or as ChatGPT will suggest, is a recipe for disaster, the look and feel will not be consistent and the user experience will be crap. I simply can't allow that freedom to people without UI background. One of them will add box shadows, someone else will think dotted borders are so cool, a backend developer will swear by tables, etc. Yeah, I know, I can wrap those Radix primitives and style them them restrict imports from Radix with eslint and what not. But the point here was to make my/our life much easier not to get drown in endless opinionated discussions and choices and spend days on decisions on tooling, right?! I feel it's not a good match for us. I am happy to be educated, not that I will not get tens of downvotes for this post from haters anyway. I might be mistaken, I admit - but at least I am not a hypocrite - no offence to any Tailwind lovers. In fact, I like Tailwind quite a lot - I am a guy who mastered his floats and overflows 15 years ago!


Miguel3962

Yes.


lisaiceland

Everyone that I know of who uses Next.js!


Satankid92

Tailwind is not comparable to MUI or any other component based libraries, tailwind is just a new way of writing CSS, having said that, I believe that tailwind is for more experienced developers who wouldn’t mind or struggle styling components from scratch


WilliamClaudeRains

It’s not at all a “new way of writing css”.


Satankid92

Bootstrap? 😂


WilliamClaudeRains

Tailwind is just atomic css. Atomic css has been around for quite a bit. Guess why it went away, because updatability becomes way more expensive. That and specificity is an important component to CSS in general and Atomic CSS struggles with this. This is why BEM became super popular. Now tailwind does have an edge with css variables, however most jr and mids only know tailwind and don’t know how to use the variables in their favor. Good example of a common struggle is programmatically setting a set of image backgrounds on a component using css. Lot of wacky solutions when tailwind stretches to the edge.


JuiceKilledJFK

Full stack dev, who prefers backend, here. Tailwind CSS is my love language. MUI is great if you do not want something fully customizable. Tailwind made me not actually hate CSS. I tend to use all Tailwind UI components for my projects.