Why I Pick ShadCN and Tailwind for all my projects

- Ed suggests starting with a solid, like, global css set up for the project and then building some sort of a design system. - The CSS modules try to solve the problem of collision between classes by allowing you to write the same like class name and it's going to generate and change it. - Speaker A introduces Tailwind to the audience. Tailwind is a low-level utility class that allows you to apply utility classes and it gives you the speed of writing fast CSS. Then, he shows the example of a responsive layout in tailwind. - Shat CN is a fantastic library because it's built on top of tailwind and it allows you to easily switch between the styles. I'm going to show you a preview of the next course that we're going to be releasing soon. - Speaker A tells the audience that Babel plugin is not compatible with server rendered material UI project and recommends them to use CSS modules and Babel plugins.

Hey there, my gorgeous friends on the Internet, ui libraries, oh, my gosh, everywhere. There's like 100 bajillion of them. And I get this question asked so many times on the Internet. Hey, Ed, which one should I pick? Material, ui, mantine style components, bootstrap? There's so many. So by the end of this video, I'll tell you which one is my favorite one. Don't you just hate that when youtubers do that, by the way? Oh, by the end of the video, you actually get to see what I like. How about now? How about now? That was a great time. I'm sitting and watching this. So let's get into it. I'll take you through. So my favorite one, shat CNN tailwind, by the way, if you want to know. And for the foreseeable future, I'm gonna stick with these. Also, moving on for these next videos. I thought I had my face in it. I don't know why. Is this better? Is the content better now? So, when you started off your journey in web development, tell me if this sounds a bit relatable. So you write all your HTML code, right? And then you go in your global css, and then you make a button, right? You style your button the way you want, and then you're like, well, this is kind of like my hero section. So I'll name this hero, and then we'll go here and select that, right? I don't know. We could do like a min height of 100 vh just to make this, like, full screen display flex, right? So you just, like code and code and code stuff out like this. But eventually you get to a point where you keep using these class names over and over again, and then you have different class names that you probably don't remember their names anymore, and they can collide and clash. And once you start writing, like, a lot of code like this, it just becomes very hard to maintain, also modify that code. So after learning that, after creating several projects like this, like this took a lot of time, especially with lots of pages, right, then you probably start composing your components a bit and actually build some sort of a design system. So, moving forward, right, we probably went with actually doing, like, a proper reset now. So we do margin zero, we do padding zero, and what's that? The box sizing. Right. Border box. So we want to make sure we reset that. So what I'm trying to say is, rather than expanding it like this and just keep making up class names, try to have a solid, like, global css set up for you. So that means like all the elements should be set up from the start. So a h one, like let's say this is my big primary text on the screen. So I'll have a font size of four ram for this, like that. Okay. And I'll just like go through all the different elements and style them accordingly. And again, the sizes doesn't matter here. Like if it's h one and this is h two, doesn't mean the h two can be bigger. And you should then also style elements just because they're h one and page two. You should style them based on the, sorry, not style them, but you should add them based on their importance on the page. So in this page I only have one h one, so that's fine. But I kind of have another h one in here. You like sequentially. Go down sequentially? Is that a word? But if I have a h one, the next one would be h two. You can't have multiple h two s. Like you can imagine this is like a title to a blog post in any way. And then in that you could have also like subheaders that could be h three. But again, that doesn't mean like this h two can be bigger than the h one. Like I could have my, like my first header just be like that size and the actual blog post be maybe bigger. Now it's not going to look good in this example, but this is entirely possible. And it's fine. It's not bad code, but if you set up everything properly here from the start, including buttons, styling your buttons, adding variants of colors as well, and also creating variables up here for your colors, design a color scheme as well. What we can do is go here to the top and select our root. And here we can add our variable so we can see something like primary. And this primary color is going to be. So there we go. We can define a primary color, a secondary color, like muted one, and then we can head over to like whatever we want to apply that to. So here we can say color. That's going to be a variable called primary, like. So this is all fine, but what's the problem with it? There's zero problems with this. And you can build out your applications like this. But I feel like you get to a moment in your web development career where it just feels like it takes a long time, you know, especially when you want to build out something complex. You don't want to spend hours, hours and days and days building out a whole design system. So you opt out for these options. And thankfully the web development is nice, open source place and lots of them are free. And this is why I don't get why people complain about tailwind and stuff. Like, bro, it's free. Build your own. Let's just think about people that complain about free stuff just generally in life, okay? You know those type of people. Exactly. So what did CSS modules try to solve from just writing your vanilla CsS? Well, one is like collision between classes. And to understand that is like in CSS, you know how like it just cascades from up to Downdez so you could easily overwrite a different class name that you already created. So we have hero here. Okay, just to show you hero. And I'll do a background of blue, whatever, okay, it doesn't matter. But let's say later on, I'm like, oh, I'll make a new class called hero. Totally forgot about this one up here. And I'm like, well, the background, let's add a border to this. Like that's all I want. Borderland. How they do border. Border, two pixels solid like that. Okay, whatever. So there it is. And then you go over to another page and you're like, why the heck does this thing have border? Well, that's because you already used another class with the same name. So CSS modules is going to let you write the same like class name and it's going to generate and change it. So like on runtime, those two components or those two different HTML elements are going to have completely different class names attached to. So even though we're naming it the same here, this is going to turn into like something like that. Okay. And this to something else. So how do you do the CSS modules? Honestly, all you need to do is head over here and create a new file and call it homepage dot module CSS like that. Cool. Okay, so here, let's say I make a dashboard like that, and again, if I make another CSS module, I can make the same dashboard class name and they're not going to collide. But the way you actually apply it, no, I don't like it because now you have to make a file for each page or for each like component that you want to associate to. Now you just have to come here and import it as well. So let's say import styles from dots. Let's do that app slash home, and then we can go here and say styles dot dashboard. But again, it's quite annoying. It's not like you get autocomplete here as well. You have to write styles dot. What was it? Okay, let's go. Oh, dashboard. Okay, styles. Dashboard. Cool. And then like, how are you gonna class? Like how are you going to apply classes to this? Well, you're either going to do some weird nesting stuff here and do h one, but that works, that's fine. Or you're going to create a specific one here, or you're going to have a global one for this. So it just becomes a bit like running around, creating more files, jumping back around just for some styles and it's like too much time. After all the vanilla CSS madness, you probably opted for something like bootstrap, which gave you a pretty much all the components you really need to build out a website. Now, I never really was a fan of the look of it, to be honest. And even though you could customize bootstrap, people didn't really want to bother customizing bootstrap. So you just ended up with lots of sites that kind of look the same. So yeah, great project, you know, not something that I use again, but as someone who's starting off with web development and is just getting out of like building static websites and simple websites, bootstrap would be a great opportunity to learn like actually how to build out a design system and the decisions behind each component that they make. Now, once in your lifetime, you probably opted for trying out JavaScript to CSS, something like styled components, where you get to define like a button like this, apply the style class to it, and then you can just write out your CSS vanilla style. And I like this for a long time. It was fantastic. The problem I did not like about it is, well, it kind of filled up your file. So like your main homepage here had another big component here, which is fine. Like, I didn't really mind this at all. To have like your styles at the bottom kind of reminded me of like working with svelte in a way. Not really, you'd still have like a normal style sheet there, but like kind of the idea of just having your styles here a bit separate from the markup. I did enjoy it, I'm not gonna lie. And it was really easy to like also apply state to it, to change up like, because it was all in JavaScript, right. So it's quite easy. And one thing I didn't really like is having to define this one big item here. And you're going to have loads of these, right? And again, you're going to need to come up with names here, you have button here, but you're going to have other sections on your page that are going to need custom styling and then your markup is going to look like this hero special header and then like all these different custom components you made and then you're like what the hell is this? And then you need to look for it and then you're like oh okay, it's a, this one here, or God forbid you have this like moved in another file and then you have to hunt it down. And not only that, it's JavaScript. Like I don't want to write JavaScript and inject JavaScript in my components as well just for styling purposes. Like this is not even going to work I think, in a server component, so you'd have to mark it with use client and that's a big no no for me already. So that's why I stopped using any type of JavaScript packages really. It's not like they're bad or anything, they're fantastic. I guess it depends on what. Like I would still, I wouldn't, I'm lying, I wouldn't opt for it ever again. But I was thinking like oh, maybe if I just do like a full on client side application, you know, and I don't really care, but you know what? No. So now we arrive to Tailwind, and a lot of people were upset about Tailwind for some reason, but what tailwind essentially is, it's just lots of low level utility classes that you can apply to your elements. So what I mean by that is they essentially took like padding with like every, every property in CSS that you can think of and they got broken down into small reusable pieces. And why is this fantastic? Well this is fantastic because the design system is already made for us, which is so I can just start and not worry about sizing because that's something that you need to be very consistent of when you come to design system is higher paddings, how are your margins, how do your sizes scale up and down? If they don't consistently scale up and down then your website is going to look quite rubbish. So tailwind eliminates all of that and gives you that design system and it gives you also the speed of writing fast CSS. So the end of the day, I mean you get speed and you get productivity and that's why I chose tailwind as my go to for the foreseeable future. So just to give you an example, I mean, I could just go here to my h one, right, and the class name. So let me just show you how quick tailwind can be compared to CSS modules in vanilla CSS. So again, to apply the same styles, right? We imported the styles file here and then we attached it to the main section. And then here, let's say we want to do something like this, display flex and we're going to add a min height of 100% or like 100 v eight just to make this full screen. And then we'll do flex direction, call column. And then we'll do items, justify item center. Oh gosh. And align item center. Okay, something like that. Right, sorry. Justify content is what I meant. There we go. So I just attached it to the middle there. Okay, so did you count? How long did that take? A little bit with the little errors as well and whatnot. Okay, cool. So let's do this in tailwind. Okay, so we'll hop here, we'll get rid of this. We don't need that anymore. Okay, so ready, save, remove everything. Okay, so min height, full flex, flex, call item center, justify center. Okay, so now like when you start writing code like this on the big project, it goes really fast and it's really good. And again, you don't have to worry about classes colliding. You don't have to worry about anything here. If you have anything more complicated than this, you could still separate it. But again, it's still not recommended to do that. Not only that, you also have like dark mode already enabled here. So I can just say dark. Well, if it's dark mode, then I want the text to be something else, right? Different color. And you also have responsiveness attached to this, right? So I can be like, hey, on large screens, make sure that this is flex row. Okay? And that doesn't look good now, but it's that easy to create responsive layout. So here we are, finally shat CN, favorite library of all time. It's fantastic. And I'll give you loads of reasons why it's that good. So one, it's built on top of tailwind, which is fantastic because if you do work with Tailwind, then this makes sense. Two, it's built on top of Radxui, that gives all the buttons and inputs and everything accessibility out the bat. So you don't need to worry about that either. Plus one for speed. Great. Not only that, you have teams already added to it, which is fantastic. So you can easily switch between whatever style you want to choose. And let me just show you on my full stack next course that we're going to be releasing soon. I'm really excited. Let me just give you more previews here. So this is all Shad CN, right? And it's so easy. I'll just go here in the settings, I'll just toggle light mode. Boom. Just looks fantastic. But let's say I don't like this theme for example and I want to change it. Okay check this out. I'm going to replace this and hit save and 2 seconds later boom. Look at that. We got a new style applied. Let me also give you a quick preview of the course here. So this is like a backend where we get to create products. So we're using react hook form with everything else here. So I'll just create a product, I'll choose a color for it, price, maybe some tags, cheap quality. Let's upload some images as well. I'll pop one image in. As you can see it's in its loading state. It's going to get uploaded. And then here we're using like server actions and lots of other fun stuff. Again, I can remove this as well if I want to. I'll just create the product. As you can see it's been created and added and boop. There it is. As the SD we can switch between the pages here. Can see we have cool animations, we have a table we can search and filter through. So I'll do cute, right? Cute notebook. There it is. We can also edit this if we want. I'll do a quick edit and maybe add another image like that. I think that might be too big. Yeah, that's too big. It's not going to accept that react query. Why not? As you can see, only that one's pulsating because that's the only one uploading as well. And let's change the title to whoo as well and hit save. All right. So cool. It makes everything so simple. I can't wait to show you more about the course. Again, this is going to sync up and create products with stripe. Lots of awesome things, but it's not this video. But keep in tune. But again, the best thing about shat c and I can think of is that when you install these components, you just install that one file that you need. So maybe a button or whatever. So you can, you don't even need to install anything, you can just copy over the code as well and just make your own component. So that's what separates shat CM from the rest of the UI libraries that I can think of is that I know what I'm dealing with. I know I'm not installing a big package and I have no idea how that's affecting my code base. Like I don't know how big that is, I don't know really what's going on underlying the like underlining the component. Whereas here I can like totally see what this button is. So essentially it's just like a variable here that's being created with some. Let me zoom in a bit so you can see this. So we have like a variable, right? And this variable has all the tail when classes apply to it, but then it also has different types of variant styles here in an object, right? So it could be like a primary destructive button outline and also size is picked for it. And here is the default variant. So if you don't add anything, it's automatically gonna go to this default one, which is this one. Okay, so again, if you want to customize this, just open up the components and add more tailwind styles. And then whenever you import it in your project, well that's now customized to your own needs. And it's so simple, right? You can just open this up and see what's going on. And then here we're just forwarding the refs as well and just attaching like all the refs and props that needs to be passed through. And that's it. Like that's a essentially everything that you have here. So it's very easy to see what's actually going on. There's also material UI which I do kind of like if you do want to go down the route, feel free to do it. Let me know how it is. I haven't tried it, but what I did see that I kind of liked is that lots of their components have animations on them. So that's, that's nice, that's nice. Like that, see, like that pulse and like where I click, that's where it pulses from. Small touches like this. Super cool. So if you want to do that, do that. But I think with like material UI you also have to like add a provider to it and then they recommend you to use CSS modules as well to like customize it. So it's like, oh, nevermind then, that's me out. As of late 2021 style components is not compatible with server rendered material UI project. This is because Babel plugin. Okay, so I don't want to talk about Babel plugins. I just want to make my website pretty. Anyway, hope you enjoyed me rambling about here. Thank you so much for watching this episode. And yeah, let me know if you want me to do more of these. I'll happily do some. Okay, love you lots everyone. See ya in the next one.