Class Variance Authority (CVA) Quickstart

[@CodinginPublic]

Not exactly sure why I had “px-0” … should have been “p-0”

[@pedapudiraviteja7388]

Why is this video so goddamn underrated? Clear and precise explanation for CVA. Keep going ♥.

[@CodinginPublic]

Thanks, my friend. Glad it was a help!

[@andrewc8125]

Started using cva like a month ago. It just changed my dev life. Especially great with server component. Awesome content!

[@CodinginPublic]

It really is a sneaky-amazing tool!

[@starlord7526]

what do you mean by server component? Is it the one mentioned along with Next?

[@CodinginPublic]

@@starlord7526 Server side rendering I think is his point. The server can render the route as it’s hit.

[@bobdpa]

Awesome video and thanks so much for the finished code!

[@CodinginPublic]

So glad you enjoyed it!

[@MRYesaga]

Thank you a lot. Could not donate money. But just wanted to thank you for your endeavor.

[@CodinginPublic]

Thanks so much, my friend! Really appreciate the kind words!

[@zakariabelhadj8673]

Let's go!

[@DanteMishima]

Here we go!

[@senseicodes]

Awesome video!

[@CodinginPublic]

So glad you enjoyed it!

[@senseicodes]

I learnt a lot!@@CodinginPublic

[@martinadrianenghoy9937]

Thanks for the awesome video, Chris, as always! Would also like to ask if you're looking to setup possibly a Discord server in the near future? Would definitely love a community for your channel! 💖

[@CodinginPublic]

Thanks! Glad you enjoyed it! I’ve considered it; just not sure how many would be interested? Let me throw a poll up.

[@weihyac]

Thank you

[@CodinginPublic]

You're welcome

[@elenamikhaylova5086]

good video, thanks!

[@CodinginPublic]

You're welcome!

[@kelvinpraises]

Thanks!!!

[@CodinginPublic]

You’re welcome!

[@rafeeqshaik7355]

How to style child components, which does not inherit styles or in React native using native wind library. When creating a button or a card, the children does not inherit parent styles.

[@CodinginPublic]

I’d just style them directly when you write the child components. Or maybe I’m misunderstanding?

[@TytusDubel]

Hi Chris, any news on your Astro Course?

[@CodinginPublic]

Hoping to do an early release before the end of the year.

[@yudhapmksss]

Hi, can i use this library for javascript?

[@CodinginPublic]

I think so? It's just strings, so you should be able to process anything if you just want strings?

[@ardhikaryzha317]

how to add color?

[@CodinginPublic]

I'd just add another option like “style” or something like that next to varient/intent, size, etc. Then you can reference that option when invoking the button.

[@PhuocNguyen-zp5jm]

First argument of cva is not suggest type of tailwind, className (like className in div prop) Anyone can help me this case, pls ? tks

[@CodinginPublic]

Just need to update your VSCode settings as shown here: cva.style/docs/getting-started/installation#intellisense Let me know if that doesn’t help.

[@PhuocNguyen-zp5jm]

@@CodinginPublic Ohh tks you, this is my mistake, its work. But i got new issue when i use "var" like this (data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)]) in cva, this suggest will not working -_- . I'm still figuring out and fix this Using : shadcn UI If you any solotion for this, pls tell me Tks for your help 🤗

[@CodinginPublic]

Ah! I don't have a solution, but I'm sure there is one! The underscores don't help for the spaces?@@PhuocNguyen-zp5jm

[@PhuocNguyen-zp5jm]

@@CodinginPublic Ahh, i think regex setting cva json is missing for "var" , i just remove "var" and sugg will be showing Yep, i forgot tailwind will automatically add "var(...)" in final value when we use double underscores in "arbitrary values" data-[swipe=end]:translate-x-[- -radix-toast-swipe-end-x]. All goods, for now 🤣. Thanks for your time, have a good day 😄.