cn() - Every Tailwind Coder Needs It (clsx + twMerge)

maybe you've noticed that a lot of people are using this CN utility function when you work with tilvint in this video I'll explain why people are using this so let me remove this for now let's start from scratch now we have a clean slate and what's the problem with this why do we need anything else well in the real world when you're going to use this button for example here on a page you also want to have the ability to pass class name here right so here we want to pass a class name prop so just like standing it on a native element we want to be able to style it on our own custom component as well and here I may actually decide to override the default background color so here I actually want to pass BG green 500 let's say right so the button has a BG blue 500 s default background color and now when we use this button in this instance here we actually want to pass BG green 500 so here this person now needs to accept a class name prop so we can say class name and let's quickly type this for typescript so we'll say type button props and we can actually use a type from react so it will just be button HTML attributes and then we pass in HTML button element so basically what this will allow us to do is pass any props here that you can also accept here on the native button Element last name is one of them so now this class name has that BG green 500 how do we add that here so typically you would try something like this and refer this to a template literal and now you can try adding the class name right so you would do something like this so now this is going to be BG green 500 and this will be BG blue 500 so now there is a conflict and the problem with Tillman is these conflicts are not predictable you don't know the outcome really it doesn't matter if you put this at the front of the class list or at the end in both cases when you have a conflict you don't really get the result that you expect in general people expect that if you put it at the end of the class list that this one wins if there is a conflict and that's not the case by default by default here we don't really know what's going to happen the solution for this is something called Tailwind merge and I have a complete separate video on this one it also solves some other problems you can see it's been exploding in the past few months so I'm gonna install that npm install Tillman merge alright so I have installed this and what we get from this package is a function called TW merge so I will import that so now we're going to wrap this entire string in this function so I'm going to call that function I will just say TW merge and I have parentheses here let's see so what we're going to do is we're going to pass the first argument here those are going to be the base classes all right so now what we have is we're calling this function TW merge and we're just passing our base classes here that's the first argument the second argument can then be the class name so here we can actually that class name right so we're just calling a function TW merge it has two arguments right now this base string of Base classes and then we have class name here as the second argument and the benefit of doing this is now when there is a clash and we still have a clash because we're passing in BG green 500 which clashes with BG blue 500 we can now be rest assured that BG green 500 will win which is what you want right so you expect to override the base classes when you put in a class name like this as a prop so now when it comes later it will actually win which is in line with our intuition and there can be other conflicts as well for example here we have adding Y2 and petting X4 but what will happen if I now pass in p-5 and so here I'm saying on all sides the padding should be 5. and here I have some other classes so they conflict in a way but the class names are slightly different and two and merge will also make sure that that conflict is also resolved intelligently the second problem you're going to run into in the real world is when you have conditional classes so we may have some kind of pending state so let's say pending set pending and I will quickly import this so now depending on the pending States we may want to change the background color and we can very easily do that with till the merge as well I'm actually going to remove text device here as well so we get some extra space so now we have our base classes in this first string here now we got the class name as a prop Here and Now what you can do is you can simply have another argument there and you can simply say attending is true it should become BG gray 500. so now we have our base classes here we then pass a class name and then we also have some conditional class here so depending on whether this is true or false will this BG gray 500b applied matzo till it merges a really handy library now there's one downside or at least some people think it's a downside which is that you cannot use an object here for these conditional classes so what some people want to do if I comment this out what some people want to do is instead of passing this pending and then Ampersand Ampersand some people want to do an object here and then you have basically as a key the string that you want to apply with the Tailwind classes depending on the value of some variable but as you can see here this is not possible here with Tillman merge however it is possible with a library called clsx so it's clsx you also solve that problem of conditional classes and you can actually pass this with objects so you can run it like that now clsx does not solve the other problems so when you have conflicting Styles CLS X doesn't help with that so what the author of Tillman merge has suggested is that if you really want to use that object style you can use CLS X until when merge together so you can first pass everything to clsx and then the result of that you pass to TW merge and this is basically the C and utility function so I'll show you how to implement that now it's been popularized recently by this UI Library chat CN and now we're going to combine clsx until we merge so we also get that object's possibility I'm going to install clsx npm install cnsx so what we want to be able to do is instead of using pending Ampersand Ampersand because some people don't like this syntax some people really want to use this object syntax which is not possible until we merge alone so now we're going to replace this with the c and utility function which we're going to create now right so this is the result that we want we want to be able to write this all right so I've saved here and let's put that function in a utilities file and this can be the following function so we're going to export that and we're going to call that CN so let's see so CN needs to use that TW merge function but before we do that we want to pass everything to clsx so we can use that object syntax and then the result of that will be the argument for TW merge so let me import this TW merge and let me also import clsx clsx from clsx alright so now the input of this function here when we call this C and first it's a string then class name here which could be a string but now also have an object actually so now we also should be able to pass an object here and then of course we have the object here for a conditional class or multiple conditional classes so we have these inputs here but we're using typescript here so what type is this going to be because we have different types here well clsx actually also gives us the type that we can use here and these are all class values and it should actually be singular so class value so what we're actually going to do here all these inputs we're going to wrap them up in an array so we can use this rest syntax here which will put everything in an array and then we can just say the inputs here is basically an array of class values right and then we pass the inputs to this C less X function and so first the inputs will go through clsx which makes the object syntax possible and then the result of that will be passed to TW merge which will merge conflicting classes intelligently and then of course also add the return keywords here right so make sure you return whatever the result of this is and now I can input this and now we have the final formats of this function and also an example of how you would use that in this syntax so typically what you also want to do here is you get other props here so a button component may also want to have for example type is submit right so other attributes that you would typically have on the button element we also want to pass that through here as well so we typically also want to put everything here maybe instead of a rest we can call it props and then we can just spread that here as well so just to spread that out here again now to really make this button reusable we also want to pass the ref here for example so we want to be able to pass a ref and also children for example but I'll have a separate video on how to build a complete reusable button component now it looks a bit complicated and if you really want to become a professional react next to us developer checkout my react next to S course also make sure you've mastered the fundamentals those are both JavaScript as well as CSS I have courses on them both check out the links in the description hope this was helpful and see you in the next one bye

Channel: ByteGrad

Views: 118,890

Keywords: tailwind css, clsx, twMerge, tailwind-merge, cn(), cn shadcnui, shadcn ui cn()

Id: re2JFITR7TI

Length: 7min 46sec (466 seconds)

Published: Sun Jul 30 2023