@uzairhaider1016
Points you forgot to mention for tailwind - it has built-in dark mode support, which is not available in bootstrap ( or any other i know) - it has customized utility classes, like if I want to give 252px of width, i could use w-[252px] - it has classes for psudeo selectors like before: , after:, focus: hover:, active:, disabled: - you can style based on parent item using "group" and based on siblings using "peer" - the best thing is that you can add your custom classes. - one thing I also like about awesome people is that some one made a framework on tailwind "tailwind elements" which is a total copy of bootstrap in tailwind. - last thing is that if we use taliwind using CLI or wiht Post CSS, it only adds used classes in build files. so you will get reduced CSS file size.
@kbutube
Chakra UI implements Emotion, which is like an evolution of Styled Components, and in way that makes it much easier to get rolling with a CSS-in-JS system Styled Components itself. That rearrangement at the end brought me back from 🤯 to 😎 You should play with it more!
@smhmkkh
Chakra UI all the way; one of the best things about it is how to apply responsive styling so for example ‘bgColor={[“blue”, “red”, “teal”]}’ will show a blue background color on smartphones, red on tablets and teal on everything with larger screens than that, you can also use hex colors
@daved8070
For me, css modules live in the same folder as the related component (hence the modules). Easy to find the styling you want and means your components are easily transferred to other projects. Though I see you're an inline kind of guy 🙂
@MrJettann
Interesting video, Ed! IMHO css modules is much better than styled components, because it's a simple css. Problem with finding the styles file can be simply solved, if you put your component file and style file besides each other. Styled components makes the components too big and unreadable, and if you will make a special file for this, why not use css modules instead?) Just my opinion, do anyone agree?
@antonpieper
4:50 in most editors you can literally just Ctrl + Left Mouse Button on a class name (i.e. styles.contacts) and it will open the file at that class. Also you can put your (s)css modules in the same directory as your component (which is common practice).
@Meerbahadin
Chakra is fully customizable with just one single theme object and makes the responsive design very easy and it has full TS support, I'm not sure how you rate something that you don't use
@praveenvinopv9929
You forgot it man, Well I do that I place ANTD above perfection 🔥
@AndriusLau
I think Chakra UI, Mantine, and Mui are perfect solutions for full-stack devs, who do not like to write CSS :)
@ngonimugumwa6374
I was a huge Tailwind Stan (still am), ChakraUi which I hated the first time I tried it but is something I appreciate more now that I've worked with React Native and Nativebase. Great tier list though.
@matthewchukwu1306
1. Chakra-ui 2. Tailwind
@m_tdjk
Depending on the project, the requirement and complexity, I do enjoy and love both Tailwind, styled-component and CSS modules. I really need to give Chakra UI a try
@JEsterCW
7:38 - That's why there's a convention, when youre moving styled to seperated file with prefix "styled" and then you import all as Styled then you ure using <Styled.Btn/> and you know whats styled and what's not, this is the most popular convention used around the world and how should it be done. I love the semantic naming of styled components, but not knowing whats what is also a problem, so thats right. 15:27 - I hate when ppl say it as an argument against tailwind, first of all nobody will have the same component like few times as a child that contains the same classes, usually u ll map those, or will seperate it as a re-useable component(if needed), u can always use arbitrary variants where u can use [&>h1]:p-2 . You have also Twined, TwClassed libs for making tailwind even better experience with more semantic meaning also if ure building a pure static website you will use astro = re-useable components, you can map childs or components inside other components, so i dont really see a problem over here if its already "solutioned". If you need material look just use creativetim material tailwind, it provdies basic material components and if u need more u can get their paid ui kit. About MUI, mui is the worst DX u will ever have in ur developer life on the front, its the worst ui lib and sadly it looks cool, it provides amazing amount of variants of components, but the DX and learning curve is an absurd. I have used/tried every top UI lib for react, and theres nothing better than Mantine atm, altho im still using tailwind cause learning curve for ever of those is so huge to understand all that i will quicker prototype or make my own component by using tailwind and react than by sitting in the docs for no reason. Most of startups nowdays are using chakra(but using it is like doing css but inline in props way lmao, useless cause its literally css to me) or tailwind with tailwindui, everybody knows how huge pain in the ass mui is, so more ppl are quitting this piece of shithole lmao. Currently theres no better way to style components than Tailwind, I'm waiting for another revolution, but It will take years till something will be close to how smooth and easy tailwind is... using css/sass/modules nowdays is like not loving our life and not respecting our time at all. All ppl i "made" to try out tailwind loved it and started to understand the benefits of this technology, the worst part about it is that its hard to get a job where they dont use css/scss lmao
@SumriseHD
I actually just set up something in Nuxt and needed something exactly like this. And it was uploaded 7 hours ago! Thank you so much! Missed "Ant Design" though
@jaxuys
I agree with you reasoning, another framework very similar to Material UI is Mantine
@basman7620
One of the factors I find is that most devs only think about code for developers and screens for users. This is great in a perfect world, but with testing and auditing taking a bigger role (as we seem to be transitioning from the old wild West days of early web development) people forget the most expensive part of the equation. Paying the auditors and testers is normally more expensive on a daily basis and making things harder for them to test/read ultimately costs the project more money. You're probably not going to be able to pass all your source code to an auditor so make sure whatever gets rendered makes sense when checked in the browser. I think Tailwind has a plug in for this now but it used to take our auditors about 4 or 5 times longer to check rendered HTML and they would get more irate at the code taking ages to make sense of.
@snake1625b
Material UI + tailwind is best imo. Material UI has a way to generally style all the reusable components in a config so 99% of the styles can reside there. That way in your code you barely ever have to actually style anything. In the rare case you do have to do custom styles you use tail wind. Styled components, css modules, using the sx prop in Mui is not the way to go. It requires having a whole nother file and what can be done in 1 line, styled components will need like 10.
@velkb228
1:25 such a distinguished argument, I totally agree
@aashayamballi
Where is Ant design?
@nivethan_me