@nivethan_me
15:56 in Tailwind to apply classes to all 3 h1 inside a div you can use arbitrary variants(from tailwind 3.1) <div classname="[&>h1]:h-5" > <h1> hello 1</h1> <h1> hello 2</h1> <h1> hello 3</h1> </div> pretty cool feature in my opinion 🔥
@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
@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?
@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
@aashayamballi
Where is Ant design?
@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 🙂
@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).
@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.
@CanRau
Also downside of css-in-js like Styled Components is the additional runtime size and cost, which is why many are moving away, especially now with the (new) rise of SSR
@jaxuys
I agree with you reasoning, another framework very similar to Material UI is Mantine
@praveenvinopv9929
You forgot it man, Well I do that I place ANTD above perfection 🔥
@GGGGGGGGGG96
At minute 15:00 - the Tailwind-example with the h1-tag look good, because there is only one h1-tag there. But if you have the same tag many times, than you have also to repeat these tailwind-classnames every time (or put it in a variable). Beyond from React, tailwind is almost like writing inline-css, but just with class-names. It is not good or bad, or perfection, it only depends on the project. It has also its disadvantages because it is almost like writing inline-css and you always have to know for almost each css-property/value the corresponding class-name and how to combine them. Let say you need a "justify-content: flex-end" - what could this be in tailwind (or bootstrap)? ...🤔 could this be "justify-content-flex-end"? Or just "flex-end"? Maybe "flex-justify-end"? Is "display:flex" included in the definition or should this maybe combined with some "display-flex" or "d-flex" class? So let's do a google-search (or look in the documentation) again, and again, and again, and again, ..... The google auto-suggestions is already full with these "display flex tailwind" bullshit 🤣
@matthewchukwu1306
1. Chakra-ui 2. Tailwind
@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.
@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
@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.
@khakcsar
Where is mantine???
@uzairhaider1016