Why I Pick ShadCN and Tailwind for all my projects

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 mantin 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 but by the end of the video you actually get to see what I like how about now how about now now is a great time I'm sitting and watching this so let's get into it I'll take you through so my favorite one shaten and tail one by the way if you want to know and for the foreseeable future I'm going to stick with these also moving on for these next videos I thought I have my face at it I don't know why it's this better it's 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 that's just kind of like my hero section so I'll name this hero and then I'll go here and select that right at a 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 and 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 proper reset now so we do margin zero we do padding zero and um 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 setup for you so that means like all the elements should be set up from the start so a H1 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 H1 and this is H2 doesn't mean the H2 can be bigger and you should then also Style Elements just because they're H1 and H2 you should style them based on sorry not style them but you should add them based on their importance on the page so in this page I only have one H1 so that's fine uh but I canot have another H1 in here you like sequentially go down sequentially is that word but if I have a H1 the next one would be H2 you can't have multiple H2S like you can imagine this is like a title to a block Post in any way and then in that you could have also like subheaders that could be H3 but again like that doesn't mean like this H2 can be bigger than that H1 like I could have my uh like my first header just be like that size and then the actual block 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 uh adding variance of colors as well and also creating uh variables up here for your colors to 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 a muted one and then we can head over to like whatever we want to apply that to so here we can say color and it's going to be a variable called primary so this is all fine but what's the problem with it there's zero problems with this and you could 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 like bro it's free like 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 down 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 o 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 border how do they do border border two pixel 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 cuz 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 uh those two components or those two different HTML elements are going to have complete completely different uh class names attached to it 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. 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 not going to collide but the way you actually apply it no I don't like it cuz 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 do let's do that app slash home and then we can go here and say styles. dashboard but again it's quite annoying it's not like you get all aut to complete here as well you have to write Styles dot uh what was it okay let's go oh dashboard okay Styles dashboard cool and then like how are you going to class like how are you going to apply classes to this well you're either going to do some some weird like nesting stuff here and do H1 but and that works that's fine or you're going to create like a specific one here or you're going to have like a global one for this uh 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 pretty much all the components you really need to build out the website now I never really was a fan of the look of it to be honest and uh even though you could customize bootstrap people didn't really want to bother customizing bootstrap so you just ended up with lot lot of site that that kind of look the same so yeah great project you know not something that I use again but as someone who 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 uh 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 liked 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 I didn't really mind this at all to have like your Styles at the bottom kind of reminded me of like working with Z Bel in a way not really you'd still have like a normal style sheet there uh 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 going to lie it was really easy to like also apply state to it to change up like cuz it was all in JavaScript right so it's 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 butzon here but you're going to have other sections on your page uh 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 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 in a server compon component so you'd have to Market with use client and that's a big no no for me already so that's why I sto using uh any type of JavaScript uh 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 up 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 nor really care but you know what no so now we arrived to tailwind and a lot of people were upset about Tailwind for some reason uh 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 withd like e every 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 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 high your paddings how your margins how do your sizes scale up and down if they don't consistently scale up and down then your 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 at 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 H1 Right add a 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 m height of 100% or like 100 VH just to make this full screen and then we'll do Flags Direction call column and then we'll do items justify item Center oh gosh and align item Center okay something like that right sorry justifi content is what I meant there we go so I just attached it to the middle there okay so yeah 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 men hide full Flex Flex call Item Center justify Center okay so now like when you start writing code like this on a big project bo bo bo 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 screen means 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 chaten 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 make sense two it's built on top of radx UI 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 uh 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 shaten 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 two 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 back end where we get to create products so we're you using react hook form with everything else here so I'll just create a product I'll choose a color for it a price maybe some tags cheap quality let's up 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 being created and add it and Boop there it is ASD ASD we can switch between the pages here as you can see we have cool animations we have a table we can search and F filter true so I'll do cute right cute notebook there it is um 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 it's too big it's not going to accept that uh 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 woo as well and hit save all right so cool all right it makes everything so simple I can't wait to show you more about the of course uh again this is going to sync up and create products with stripe lots of awesome things but it's not this video but but keep in tuned but again the best thing about shat siand 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 chat 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 codebase like I don't know how big that is uh 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 uh Tailwind classes applied 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 um and also sizes picked for it and here is the default variant so if you don't add anything it's automatically going to go to this default one uh 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 customize 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 and props that needs to be passed through and that's it like that's essentially everything that you have here um so it's very easy to see what's actually going on there's also material UI which I I do kind of like like if if you do want to go down the route feel free to do it and let me know how it is I haven't tried it but what I did see that I kind of like this that lots of their components have animations on them so that's that's nice that's nice to know like that see it like that pulse and like where I click that's where it pulse is 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 it's like oh never mind then that's me out as of late 2021 style component is not compatible with server rendered material UI project this is because Babble plugin okay so I don't want to think about Babble 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 lot everyone see you in the next one

Channel: developedbyed

Views: 44,077

Keywords: react, tailwind, css, web development, react tutorial, shadcn tutorial, tailwind css, styled components, mui, css modules, next 14, developedbyed, dev ed, css tutorial

Id: 98v05b-u2OE

Length: 18min 53sec (1133 seconds)

Published: Wed Jan 24 2024