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.

Really good video. The progression through the details is perfect. The example you use is concise and to the point. Great teaching.

import { twMerge } from "tailwind-merge"; import { clsx, ClassValue } from "clsx"; export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); }

Amazing. KZread recommended your video just when I saw Shadcn uses cn clsx twMerge

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 ❤

@ByteGrad

11 ай бұрын

Glad it was helpful

@mufaro_xyz

10 ай бұрын

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.

Great video. You covered all that had to be clarified and there's none unneseccary information. I'm glad yt suggested me Your channel.

@ByteGrad

11 ай бұрын

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 🤩🤩

Super helpful. Thanks. looking forward to check out your Next 13 tutorial.

I did wonder what this was all about. Thanks for the explanation.

Thanks for this great video, just implemented into my side hustle. going to be very helpful

Well done! Looking forward for next video!

@ByteGrad

11 ай бұрын

Thank you, more to come

Brutal, made my morning! Thanks!!!

@ByteGrad

11 ай бұрын

Glad you enjoyed it!

well explained! tnks!

Thanks, Amazing work

Great video thanks man keep posting like this content

Thank you man!

Superb loved 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!

@ByteGrad

11 ай бұрын

Glad it helped!

under rated channel. i love the algorithm

@ByteGrad

11 ай бұрын

Thanks, appreciate it

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?

Thanks It was really helpful

thanks so much!

This is how you create a problem then build a fix for, I do believe using just css will be better

@IvanKleshnin

4 ай бұрын

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.

@user-xc1rl4nc4q

Күн бұрын

@@IvanKleshnin Not fair. Give examples of how can this be better compared to the simple css approach.

Great video, so can you tell me what is your extension in your vscode, plz

Thanks a lot

thanks it was helpful

zoned out, ended up staying just to listen to the voice. Very soothing.

@HoNow222

4 ай бұрын

honestly audio is pretty bad

@programwithalex

3 ай бұрын

exactly lmao@@HoNow222

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)

@martapfahl940

10 ай бұрын

I will definetely use it in my next project, its awesome! Also really beautiful

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

@e-jarod4110

10 ай бұрын

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"

@adampatterson

10 ай бұрын

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.

@zzzyyyxxx

10 ай бұрын

You can just use a template string with conditionals inside braces if you really want to, it works fine.

Awesome :)

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.

@ByteGrad

11 ай бұрын

Appreciate it, thanks

I only recommend using tailwind-merge if absolutely necessary, as it introduces quite a large bundle to your project

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

@ByteGrad

11 ай бұрын

Great. Will do! 😊

Cool, now I know the origins of this shadcn helper function

@ByteGrad

11 ай бұрын

Exactly

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

thanks!

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.

@dkr91

8 күн бұрын

Lol the performance argument. Is it still 2017?

Concize and helpful

New conecpt I learned.

Can you please give the link for your reusable button component video

I started using this cn pattern a few months ago after a KZread video by Mewtru

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

@sunraiii

11 ай бұрын

The reason for using tailwind, is not having to go outside HTML files. This goes against that.

@alexm9104

11 ай бұрын

@@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.

@andreilucasgoncalves1416

10 ай бұрын

​@@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

@IvanKleshnin

4 ай бұрын

@@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.

@andreilucasgoncalves1416

4 ай бұрын

@@IvanKleshnin I am not even using TW in my projects nowdays, I am using sass and creating CSS files for simplicity

Very nice explanation

@ByteGrad

11 ай бұрын

Thanks 😊

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)

I am using tailwind-variants package, which is an optimized version of cva for tailwind and does this automatically.

@ByteGrad

11 ай бұрын

Interesting, will check it out

@hendrywilliam

11 ай бұрын

Yes, its an amazing library, and also easy to understand. I personally use it in my personal project.

@aliventurous

10 ай бұрын

Are you able to use the shadcn/ui library with tailwind-variants instead of cva?

@oemeraran8183

10 ай бұрын

@@aliventurous yes. It does exactly the same and more.

@aliventurous

10 ай бұрын

@@oemeraran8183 Would you mind sharing how you've set up your project? I'm curious how you've modified shad's default utils.ts

hi whats the difference of just using the twJoin function than combining both libraries?

Great content ✅✅!! Can i use this in react native apps ? How ?

Unrelated to the topic of the video - "use strict" doesn't do anything inside module. Code evaluated in modules always runs in strict mode.

how do we set different theme to each multiple (dynamic) pages ex: category pages, or maybe random themes for each blogpost?

As far as I know tw megre implemented clsx funcionality so you shouldn’t need clsx anymore with tw merge.😊

@ByteGrad

11 ай бұрын

twMerge doesn’t support object syntax for conditional classes, but clsx does. That’s why they’re still used together

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

@ByteGrad

11 ай бұрын

Thanks 😊

superb explanation... can't find your reusable button tutorial ...will be glad if you share the link

it's criminal how unknown this is!

cool vid :)) but anyone know the issue about tailwind intellisense using cva (clsx+twMerge)? now I'm struggle with it :(

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 } )}

@ByteGrad

10 ай бұрын

Yep, similar to clsx. But it doesn’t do merging like twMerge

@aliqureshi4194

9 ай бұрын

​@@ByteGradwhat do you mean by it? How is it different?

where do I add 'prefix' of tailwiind cofig 🤔

Is it a bad practice to just use classNames library?

Theme for vscode?

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?

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

@abdulramonjemil

9 ай бұрын

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

Will Tailwind tree-shake the output of cn()?

js for your css in your js

You don't currently have your own Tailwind CSS course. Will there be one in the future?

@ByteGrad

11 ай бұрын

Yes, working on it 😉

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.

More tailwind user than tailwind coder :)

👍TY - Love the solution.

tw-merge do what clsx do. I don’t know why people still use both. Nobody use object syntax!

Goood video

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

@andreilucasgoncalves1416

10 ай бұрын

That is probably the reason why twMerge does not use clsx by default

@Yinandyng

10 ай бұрын

@@andreilucasgoncalves1416 i wathced code of tw merge, its actualy very impressive. It has in memory cahce and caches merge results

How would you handle dynamic values like this: `w-[${size}px] h-[${size}px]`? Afaik twMerge does not cover this.

@ByteGrad

10 ай бұрын

This should work in twMerge

Hi, tailwind variants make this in unique lib!

Is the „classNames“ lib not also taking care of both problems?

@ByteGrad

11 ай бұрын

Yeah that one is similar to clsx. They don’t do intelligent merging when classes conflict, you need Tailwind-Merge for that

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

@ByteGrad

11 ай бұрын

Noted 😁

in my understanding, the "cn()" function is an implementation created by shadcn?

What is your vscode Theme name?

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

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.

@brunopanizzi

11 ай бұрын

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.

@thegrumpydeveloper

11 ай бұрын

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.

@ByteGrad

11 ай бұрын

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

@rickvian

11 ай бұрын

@@brunopanizzi yes i meant appear in the stylesheet

@everybodylovesballs

5 ай бұрын

@@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 use "!" to override defaults. Why you need 2 libraries to do that?

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

Heh, I have implemented literally the same thing like several days ago😂

Front End is becoming such a hellish freaking mess

Could you please redo this video with cva?

just to change background-color :D

@ByteGrad

11 ай бұрын

😜 Any conflict + conditional classes

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.

@ByteGrad

11 ай бұрын

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

@Suplen

11 ай бұрын

​@@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.

@ByteGrad

11 ай бұрын

Yeah you can go either way I think. There’s a discussion about this at the Tailwind-Merge repo on GitHub

@commentdebloquer

11 ай бұрын

@Suplen is right i would suggestion you all to try tailwind-styled-component

@MagicTheKrakening

10 ай бұрын

@@Suplen all you do is create the variants within the button components... i've never had a problem with classes being overwritten ever.

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.

Great video. Fast paced but covers all the background and detail. Keep doing more of these please 🙏

@ByteGrad

11 ай бұрын

Thanks, will do!

Wouldn't a ternary operator or "or" operator be able to solve this anyway?

@ByteGrad

11 ай бұрын

That would be the same as &&. It works but syntax-wise a lot of people prefer object

This kind of stuff in the real job world would be ridiculous.

So all of this is required to overwrite some base styles? This is nuts.

Anndddd another thing Vue does out of the box

You can also solve the override problem with passing class with `!important`. It seems easier, in tailwind it just one symbol `!p-5`

@Kaioin

11 ай бұрын

!important bad

@linusfessler

11 ай бұрын

​@@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.

Thank God Vue can handle all of this😂

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!

@ByteGrad

9 ай бұрын

I’ve set the video to ‘Not made for kids’. Are you sure that is it?

Just don't allow owerwrite. Make a property like variant = "primary" | "secondary"... and style based on the property

@Tresla

11 ай бұрын

That's very inflexible

@genie_dev

11 ай бұрын

​@@Tresla How is that inflexible? You should be designing your website using two or three colours at max so setting variants with primary/secondary would be fine. Unless you design your website using the colours of the rainbow

@Tresla

11 ай бұрын

@@genie_dev Color isn't the only style you might want to override...

@genie_dev

11 ай бұрын

@Tresla yes, however, your component shouldn't be changing throughout your website. What's the point of creating the Button component in the first place then if you want to change it throughout the whole site?

@benocxx7906

11 ай бұрын

@@genie_dev bruh have you ever built a website? There are always those little edge cases when a client ask you to do something weird. Better have it ready + it its not that hard to implement lol

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?

@ByteGrad

11 ай бұрын

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

@tiagoc9754

11 ай бұрын

@@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

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

where is the reusable button video 🥹

Hii😊😊🇮🇳🇮🇳