cn() - Every Tailwind Coder Needs It (clsx + twMerge)
HTML-код
- Опубликовано: 14 июн 2024
- 👉 NEW React & Next.js Course: bytegrad.com/courses/professi...
Hi, I'm Wesley. I'm a brand ambassador for Kinde (paid sponsorship).
👉 Add authentication to your app FAST: bit.ly/3QOe1Bh
👉 NEW React & Next.js Course: bytegrad.com/courses/professi...
👉 Professional JavaScript Course: bytegrad.com/courses/professi...
👉 Professional CSS Course: bytegrad.com/courses/professi...
👉 Discord: all my courses have a private Discord where I actively participate
🔔 Email newsletter (BIG update soon): email.bytegrad.com
⏱️ Timestamps:
0:00 Problem 1
3:17 Problem 2
4:00 Object syntax
4:40 cn() utility function
#webdevelopment #programming #coding
My Professional React & Next.js course is OUT NOW now! Find it here: bytegrad.com/courses/professional-react-nextjs -- this is the #1 resource to master the latest React & Next.js, my absolute best work.
import { twMerge } from "tailwind-merge";
import { clsx, ClassValue } from "clsx";
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}
Really good video. The progression through the details is perfect. The example you use is concise and to the point. Great teaching.
As i am new to react and nextjs, but started right with typescript, tailwind, shadcn... It all is quite overwhelming. I didn't understand why they use cn() in the components and how to make components reusable. Thanks for the compact explanaitions. You are my todays hero ❤
Glad it was helpful
Reusability is the reason components were created. If it's quite overwhelming, well you did a bad choice. You should first get basic understanding of something before moving onto a next thing. If you'd know CSS then tailwind is really easy.
Amazing. RUclips recommended your video just when I saw Shadcn uses cn clsx twMerge
Great video. You covered all that had to be clarified and there's none unneseccary information. I'm glad yt suggested me Your channel.
Glad it was helpful!
thank you! this really cleared up how I am supposed to pass around options to components!
I'm literally binge watching your videos at night. It is 2:55 AM here and They really are like a movie 🤩🤩
I did wonder what this was all about. Thanks for the explanation.
It's obviously useful trick, but i think it has several disadvantages.
1. You need to additionally configure tailwind-merge, if your tailwind config file is different from the standard one.
2. We don't know anything about tw-merge perfomance.
3. It makes developers less vigilant when writing replacement classes.
Thanks for this great video, just implemented into my side hustle. going to be very helpful
This is how you create a problem then build a fix for, I do believe using just css will be better
Not fair. Specificity problems occur with any styling approach, be it "pure CSS", CSS modules, BEM, etc. Tailwind-Merge is very good at solving it. And you don't need CLSX - it's just a fancy optional wrapper.
Super helpful. Thanks. looking forward to check out your Next 13 tutorial.
Thank you for this great and straight to the point video. You know tailwind-merge has twJoin function. Do you think it can serve the same purpose as cn function?
Brutal, made my morning! Thanks!!!
Glad you enjoyed it!
Amazing demonstration and to the point. You have given me the perfect solution that I have been looking for, for a while :D, which is the coniditonal classes. Thank you!
Glad it helped!
Hi, sorry for buzzing, but I'd like to ask you one more question about this if you don't mind, please
NextJS 13 doesn't support libs that apply CSS during runtime as styled-components does. One approach I found people using is adding className literals to JS object keys, then referencing it in the element className. However, this approach lacks support for tailwind sorting prettier plugin and vscode tailwind intellisense plugin, as we're no longer writing directly in the className prop. We need some extra configs that looks pretty hackish to me. (I.e creating a dumb function that accepts and returns the classname and adding this function to prettier config file)
Do you have any experience with situations like this where we assign className to variables/objects? Or do you always write components passing className as a string/cn()?
Also, have you ever heard about class-variance-authority (cva) lib? May it be a good replacement for clsx+twMerge in your opinion?
Thank you in advance
zoned out, ended up staying just to listen to the voice. Very soothing.
honestly audio is pretty bad
exactly lmao@@HoNow222
Great video, so can you tell me what is your extension in your vscode, plz
Well done! Looking forward for next video!
Thank you, more to come
Great video thanks man keep posting like this content
under rated channel. i love the algorithm
Thanks, appreciate it
Thanks, Amazing work
This was one of my first negative impressions when I started my first project in ReactJS after previously working in VueJS. It seems crazy to me to have to use additional packages for something as simple as overwriting CSS classes in a component. I think this is one of the reasons why the VueJS template system shines
I agree with you, but I would like to notice it's not necessarily the framework
Because the point here is class binding conflict, which is irrelevant of the framework
Example :
In vue, angular, react I can put a base bg-red-500 to a HTML element,
then bind conditionally bg-blue-500 / bg-yellow-500 to it
If the base bg-red-500 is not handled correctly, there WILL have conflict.
So the solution here would not to use a lib because we are too lazy to handle our css, but just to architecture and handle your classes better, avoiding css conflicts
Unfortunately, the common way in React is to use every lib available because it's "easier" or "simpler"
I could be wrong, but I think this is how Post CSS works. The merge tool is simply removing the duplicate in a predictable way.
You can just use a template string with conditionals inside braces if you really want to, it works fine.
hi whats the difference of just using the twJoin function than combining both libraries?
how do we set different theme to each multiple (dynamic) pages ex: category pages, or maybe random themes for each blogpost?
I really learn new things just by using Shadcn/ui. It's honestly way too amazing. If more people gets to know it it's gonna become the bootstrap of React/tailwind (which might be bad in a sense lol)
I will definetely use it in my next project, its awesome! Also really beautiful
I love your tutorial style, always love how everything is so well explained. Not a huge fan of Tailwind CSS personally but I do use it for singular projects. It's always good to know how something so popular is being used professionally. Great work, love all your tutorials. Glad I recently found your channel.
Appreciate it, thanks
well explained! tnks!
Thank you man!
I only recommend using tailwind-merge if absolutely necessary, as it introduces quite a large bundle to your project
Superb loved it..
Unrelated to the topic of the video - "use strict" doesn't do anything inside module. Code evaluated in modules always runs in strict mode.
Don't know. What is the point of having a `CustomButton` and allowing arbitrary changes to hit via className? Defeats the entire purpose of a UI component.
Can you please give the link for your reusable button component video
Cool, now I know the origins of this shadcn helper function
Exactly
Thanks for the video. I had used shadcn but use to not understand how it's implemented.
Please make a video on how to create reusable button/component
Great. Will do! 😊
I started using this cn pattern a few months ago after a RUclips video by Mewtru
thanks so much!
Great content ✅✅!!
Can i use this in react native apps ? How ?
I am using tailwind-variants package, which is an optimized version of cva for tailwind and does this automatically.
Interesting, will check it out
Yes, its an amazing library, and also easy to understand. I personally use it in my personal project.
Are you able to use the shadcn/ui library with tailwind-variants instead of cva?
@@aliventurous yes. It does exactly the same and more.
@@oemeraran8183 Would you mind sharing how you've set up your project? I'm curious how you've modified shad's default utils.ts
Thanks It was really helpful
More tailwind user than tailwind coder :)
Is it a bad practice to just use classNames library?
why dont we just use a ternary operator, and depending on weather we have a prop on the button component we choose what color to use?
thanks it was helpful
Thanks a lot
Will Tailwind tree-shake the output of cn()?
This is why I prefer to write my tw styles in a separate css file with @apply. It’s cleaner and solves the conflict issue
The reason for using tailwind, is not having to go outside HTML files. This goes against that.
@@nadeemshareef451 There's no "perpose" set in stone for Tailwind. Devs made @apply possible so people can use it.
You even can make a hybrid with bunch of global basic classes and modify those classes with utility classes.
It may be effective strategy too.
@@nadeemshareef451No tailwind is more than just utility classes, the main reason that I use is convention. Use @apply is not just cleaner, is more performatic than every other alternative
@@andreilucasgoncalves1416@apply can be removed from TW in the future. It's super slow (at compilation) and super complex. Creator of TW regards @apply one of his biggest design mistakes. You better reconsider your approach.
@@IvanKleshnin I am not even using TW in my projects nowdays, I am using sass and creating CSS files for simplicity
Just use "class-variance authority", If that is too much for you, then you could use this:
import { twMerge } from 'tailwind-merge'
export const twix =
(...classes: string[]) =>
(className?: string | string[]) =>
twMerge(classes, className)
Would this work in Blazor?
"classnames": "^2.3.2", its good package usage like this
import cs from "classnames";
class=${cs(
" tw-inline-flex tw-items-center tw-justify-center tw-border tw-border-solid tw-border-default-600 tw-rounded-full tw-gap-2",
{
"tw-py-0.5": value?.length > 0,
"tw-text-default-600": !fill,
"tw-bg-default-600": fill
}
)}
Yep, similar to clsx. But it doesn’t do merging like twMerge
@@ByteGradwhat do you mean by it? How is it different?
Awesome :)
As far as I know tw megre implemented clsx funcionality so you shouldn’t need clsx anymore with tw merge.😊
twMerge doesn’t support object syntax for conditional classes, but clsx does. That’s why they’re still used together
superb explanation... can't find your reusable button tutorial ...will be glad if you share the link
in my understanding, the "cn()" function is an implementation created by shadcn?
where do I add 'prefix' of tailwiind cofig 🤔
cool vid :)) but anyone know the issue about tailwind intellisense using cva (clsx+twMerge)? now I'm struggle with it :(
it's criminal how unknown this is!
How would you handle dynamic values like this: `w-[${size}px] h-[${size}px]`?
Afaik twMerge does not cover this.
This should work in twMerge
You don't currently have your own Tailwind CSS course. Will there be one in the future?
Yes, working on it 😉
thanks!
Very nice explanation
Thanks 😊
New conecpt I learned.
What about performance? I don’t know how they merge functions, but it’s probably some loops. And of that logic going to run on every render
That is probably the reason why twMerge does not use clsx by default
@@andreilucasgoncalves1416 i wathced code of tw merge, its actualy very impressive. It has in memory cahce and caches merge results
Concize and helpful
Theme for vscode?
tw-merge do what clsx do. I don’t know why people still use both. Nobody use object syntax!
Just use "!" to override defaults. Why you need 2 libraries to do that?
Is the „classNames“ lib not also taking care of both problems?
Yeah that one is similar to clsx. They don’t do intelligent merging when classes conflict, you need Tailwind-Merge for that
This is useful, but I take the approach of not having conflicts, forcing ourselves to design the components in such a way that we don't get conflicts provides a healthy maintability
It's completely fine to have these kind of conflicts. It's not a bad design per se. This is just a way of allowing overrides
What is your vscode Theme name?
Front End is becoming such a hellish freaking mess
The problem is that patterns repeat through years. This approach tw uses is not scalable. It good to quickly drop and forget some html page. But it’s not good for teams nor medium projects.
Bem is a good structure for css, module css is a scalable as well. Use proper tool for fitting tasks
js for your css in your js
I've found this video very helpful and straight to the point.
People in the comments wanted visual example, but I actually find it redundant. Your explanation was clear enough.
Regarding the topic, I faced this issue myself. Ended up making whole diff components for every btn type I want. Its not that bad as it sounds I guess, it almost acts like storybook in terms of being able to see all forms of your software's buttons. But with your video I need to revisit it
Thanks 😊
This kind of stuff in the real job world would be ridiculous.
I have difficulty in understanding why should I use another library instead of just doing the pending classes like this:
twMerge("bg-gray-500", className, pending ? "bg-green-500" : "");
It works really well and you don't import any more libraries other than twMerge.
Yep, it’s a good point and the author of Tailwind-Merge also agrees. But if you have a lot of base classes and then a lot of conditional classes it looks better to use object syntax for the conditional classes (which is not possible with Tailwind-Merge alone, so you need clsx for that). So clsx is just there for syntactical reasons
@@ByteGrad With more classes and more conditions I would personally just separate all the style logic into a component and move the above ?: operator so that it loads variables, and then just pass those.
I personally think that adding that library creates more confusion that solves problems, because if I don't know what it does suddenly I have to check and learn it just to discover that it could be easily replaced with ?: operator.
Yeah you can go either way I think. There’s a discussion about this at the Tailwind-Merge repo on GitHub
@Suplen is right
i would suggestion you all to try tailwind-styled-component
@@Suplen all you do is create the variants within the button components... i've never had a problem with classes being overwritten ever.
Hi, tailwind variants make this in unique lib!
Heh, I have implemented literally the same thing like several days ago😂
u r explanation is great but when u explain tailwind or per say frontend in general . u must show the result & the learning curve is fast when we see thing. ok thanks
Noted 😁
Hi, very helpful video. Just a suggestion, next time when you upload new video, pls don't chose video for kid category, because I cannot save it to my playlists. Thanks!
I’ve set the video to ‘Not made for kids’. Are you sure that is it?
clsx is a good match for Tailwind, but I'm not sure about twMerge.
I prefer to have some strict rules in place to control which classes or styles we can pass to a component, especially when working on a project with a design system and typescript
For example, only classes like 'bg-danger' or 'bg-success' should be allowed to be passed to a button component
For projects that prioritize freedom in styling, using twMerge can provide us with a better development experience
What's your opinion about reusing styles? I read in the docs about utility-first concept that it's recommended we handle css and HTML as a singular resource, so if your CSS changes, your HTML should be different as well
I.e. instead of creating a Button component that receives a className as prop, we would use N button elements with it's own styles variation.
I heard it's counter intuitive, but it's helpful. Still, I find it so weird and wrong that I don't know if I should follow this pattern. Maybe I misunderstood something. Would you mind sharing your thoughts?
You can go either way I think. I like to be able to style the components very specifically and so prefer to be able to just pass Tailwind classes, not some variant
@@ByteGrad thank you. I like the idea of having a component with some base styles that can be overwritten by props. But as the docs discourages it I was afraid of facing issues in the future. But I'll go that way. Thanks again for taking your time
1:50 In Tailwind CSS, if you have conflicting classes, the class that comes later in your class list will take precedence. This is because Tailwind CSS uses the "Cascading" part of CSS, meaning that if you have two conflicting styles, the one that is declared later is the one that will be applied.
For instance, if you have a text-red-500 text-green-500 class on an element, the text will be green, because text-green-500 comes after text-red-500.
This rule applies as long as the classes have the same specificity. If there are classes with different specificity, the class with higher specificity will win, regardless of its order. However, most Tailwind classes have the same specificity, so the order is what generally matters.
This is almost right. What decides the class that will be applied is the order in which they appear on the *stylesheet*, not on the class list. For most cases, the way that tailwind builds the stylesheet follows the class list order, but if you apply a class that has already been declared somewhere else this will mess up the order.
I believe the original poster is still correct. Specificity would trump order. It doesn’t matter if .class comes after #id and a similar thing would happen with some of the classes that have higher specificity. Not sure which these actually are in tw, but it sounds correct especially for ad hoc classes.
Yes, this is correct. It’s intuitive to think the order in classlist matters, but it doesn’t, it’s about the generated stylesheet. Tailwind actually seems to sort them alphabetically
@@brunopanizzi yes i meant appear in the stylesheet
@@rickvian At least the current version of Tailwind has classes sorted alphabetically. So if your className is "text-red-500 text-green-500" you will get red text and if your className is "text-green-500 text-red-500" you will also get red text.
just to change background-color :D
😜 Any conflict + conditional classes
Wouldn't a ternary operator or "or" operator be able to solve this anyway?
That would be the same as &&. It works but syntax-wise a lot of people prefer object
I am surprised I have to download a third party Library just to overide a className, A simple if check or spread operator should do it.
Could you please redo this video with cva?
So all of this is required to overwrite some base styles? This is nuts.
Thank God Vue can handle all of this😂
Goood video
I don't think this is fair to say that every Tailwind user needs this or even has access to it. Some of us use Tailwind with twig or blade or other templating engines that don't run in a Node or JS environment. These libraries are specifically for JS projects that use Tailwind. For the rest of us, just add the ! to the prop class.
Tailwind users need like 5 build tools and 3 libraries just so they don't add 100 KB of a component library to their bundle lol
Anndddd another thing Vue does out of the box
👍TY - Love the solution.
i think you actually forgot to return the string from the cn function. anyways, thanks for the video.
You can also solve the override problem with passing class with `!important`. It seems easier, in tailwind it just one symbol `!p-5`
!important bad
@@Programmer_Progamer It's probably not as bad with tailwind as in plain css but you can still only use it once and not override !p-5 again.
Would you mind exploring tailwind typography plugin? I'm a newbie in tailwind and I'm finding a bit confusing on overwriting the markdowns and creating a consistent theme
Good idea
Great video. Fast paced but covers all the background and detail. Keep doing more of these please 🙏
Thanks, will do!