we need more content like this. like developing a design system and all. You jus earned a sub from me, I hate myself for not discovering this tut a long time ago.
Tailwind + CVA replace Stitches in my favorite stack. It has all the benefit of static CSS, atomic CSS and the reactivity of CSS-in-js without the tradeoff of CSS-in-js 🤌 happy to see more people using this combo
Thanks for the content, really good! I've been using this CVA with TW and it is really good. I wasn't able to set a required prop though and would love to see a video about that.
Thanks!! Unfortunately making a prop required isn't something CVA offers out of the box. Their own docs suggest creating custom types for it. A bit sad, but that's what we have to live with: cva.style/docs/getting-started/typescript#required-variants
Great video, Thank you I've been following along with you but my outline isn't working.... Where might I be going wrong? Also, do I need the compound stuff?
hello thank you for binging that issue in github about negation and arrays even thought i dont understand what exactly (all i know is somthing good) is but happy that he merge it and add it as feature thank you soo much
I find tailwind creating the problems that we had in the past and already got solved after less and sass got introduced. Back when jQuery was what react is today and grunt/bower/gulp the mainstream, tailwind popularity is so strange it's "best practices don't work, just get it done" or the shiny new thing for this decade freelancer solo devs working on one-off projects . It does the job and I respect that, but ease of maintenance it's the most important part of a project for a true company product and the mess tailwind creates on big codebases plus multiple developers on a project just makes it a no-go. I've tried but it usually never goes well on the big real world projects
I agree with the mess. I’m also still not fully convinced on using tailwind in large projects. Tailwind is so flexible that it’s way too easy to add a simple inline style of exception to a component. Before you know you have exceptions everywhere, and no consistency at all. I think CVA can at least help a little bit with this. But I totally understand where you’re coming from.
Lol tailwind is the easiest to maintain of them all. Have you worked on projects with large css, you worry about a lot of things and breaking stuff, in tw you just care about which specific element to update which significantly reduces time and complexity of delivering features
Yeah this is definitely an option as well. Only when working in bigger teams with more people I’m still worried people will make a mess, since there’s again not really any boundaries on how to use each tool, and when to use which tool 😳 But definitely use BEM for these cases if this suits you yeah! 😁
Thank you for video. Unfortunately, CVA isn't working as I expected for even though I set everything up according to your video. For my compoundVariants, when I combine primary and outline (which is a boolean), the className "text-primary-500" doesn't work :( In my Chrome Dev Tools, I can see both text-white (as defined in my variant primary key values) and text-primary-500. I'm using this in an existing project with Tailwind setup correctly and working everywhere else. What am I doing wrong?
This is because of the order Tailwind bundles the classnames. text-white is later in the CSS file than text-primary-500, causing the text to be white. The best way to solve this is by using the package tailwind merge. See this example for using it in combination with CVA: cva.style/docs/getting-started/installation#handling-style-conflicts
I wouldn’t start out with this. Only refactor to it once it makes sense, because this also brings some extra cognitive overhead when working with this component. As long as it’s only a few conditional classes, just stick with that.
Thanks for your feedback! I will give this another thought. Zooming in one extra level makes it so that I need to scroll a lot in the editor. So I’m not sure yet what the best solution is..
I ran into this just the other day. Will try but with vue. Doy you ever touch vue? I find that d iesigners resonate more with vue as they have notions of html.
CVA is not React specific, so it should definitely work! Apart from that I have little experience with Vue, mostly worked with React mainly because of better typescript support and a big eco system (TS support recently improved for vue as well I believe).
@@frontendfyi Yes Vue 3 takes it to a new level. Great content. I went from angular, to react, now Vue. I also tried svelte a bit. Will try this CVA in vue3 in a video and let you know. Great to see Design/UI frontend concerns around here
Is there any way in tailwind css to obfuscate my css classes in html so no one can just copy my design from the page? I used sveltekit, postcss and vite.
You could use @apply and abstract your styles in a CSS file. Although the use of this method is kinda of discouraged by the Tailwind team. tailwindcss.com/docs/reusing-styles#extracting-classes-with-apply
Still new to React and Next. How would you support both buttons and anchor tags? Since you typically use anchors/Link component for routing between pages/to external sites/to scroll to elements by id while buttons are for other actions.
Great question again! Should probably be a perfect topic for a future video. I wrote it down 😁 For now I've created a playground that hopefully explains this to you. Let me know if it's helpful (sorry for the long link, couldn't get my link shortner to work quick enough with this hash link 😅 - oh, and I see RUclips also doesn't really like it, haha. I guess you will manage 😉) www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAJQKYEMDG8BmUIjgcilQ3wG4Aoc4AOxiSk3STgCEBXGGCagQQGd2nbgAUcYPnCQAPOtQAmE5OhgA6QV2oAJACoBZADI9OUYACMOSPgB4dB9dwCiAGyQgktAHxwA3uTj+4AHpAuG0AC2AJMCIAN3cYCQBPCDY4bFw4FDk5GgBzTOo4MKJMOGiIMDhuTLgiFCc4cyFqABoCuUynPgg4Oicu3sSwSzQTMHgYMJR4U0S4AGtqCAB3PL8A4IKikrhIuAA5AHltTqcVpA6w+iQ2yenMiW7qlAkUQuKkUr2wF74LtuACUGwzgq36jWY9l4fB41DQYWgogqfHW-k2bw6S3gUP4UKR4gKiRA0CQKlR20+AH4AFxwahIOJQCgAX0oNDoDCYrA4Gn4sPhiLEEmksgUiGIqn5CKgtkMxjMFmssql0GcrniXl8AQpmFpfBgJmouRZlBgQ0hPJEQrgAF5uc1cZbqPiJAAfe28mFw6UuijkNDcfUe6p2gAU3nhwCcciIrTgKgT5XEzNpeKFAEpbZryZtwnt4Ug0PNOt04CAUPNLMCRmN4FMwGBEgD4EtllFra2qtQnHMA7QUDR28jTucOs9Cm8BVAydrgKVQ2bhhBSkm+CoPqUbVuCPrDbl8JmtdqAkQYGwoIUrCgfAmVKvmR4IxFo7HmVZAigPOTmX7tafz5eTQaDeiZCg+T5RjG7hvoEQHcF+rKUJsACqfAoLkSD+oG8AAGKTokADCuCQPStC2nAoaZjaXihuSVhfseARWFCXYEU4wBFja3iUVmPjMg+eYSLGcj0K8tSoA0cHUO+UIMYxcDMU6Oo2gARIEKkeIJ4nyKJWyTtKEJoCgbB-LsEhTK87wlDJTpyf475fumpBAA
@@frontendfyi Thanks a lot this is great and I'll be sure to bookmark the link and keep up on future videos. Unfortunately I haven't gotten too far into Typescript as I still want to polish up my Javascript. I also don't want to put too much on my plate. Learning a lot of things rn. I've attempted to use it for a project but learning how to use it properly while also learning react + next + next-auth + prisma + whatever else just makes it too much (Trying to make a bug tracker. Might be too big of a project since I'm still early into learning next and react). I really want to get into it though. I come from loving C# so I like having types + the intellisense is so much nicer. I'm still trying to think of good projects to create. Trying to become at least a front-end developer for now. Thought I would go all out and make a bug tracker though as my first big project. Then create maybe a landing page as a smaller project? Not too sure. Got my website done but I just need to practice and create some projects to throw on there.
Amazing to hear all the steps you’ve taken already! Definitely don’t be too hard on yourself. You can add typescript in and use it for example for 90% of your code, and stick with any or even a JS file for the hard parts. Even that already brings you a lot of benefits! 🙏 Keep an eye out on a discord server I will soon announce. Perhaps I can be a bit more of help to you there as well 👍 I will mention it’s release in a video soon (hopefully the next one), and also add a link in all descriptions.
CVA is great, however how did you handle the responsiveness? The way recommended in the package? From my perspective there should be a better way to do it
For the responsiveness I usually use all the md: and sm: classes of Tailwind. So that way you handle the responsiveness with classes as well. Hope that answers your question.
I would love to see you build a similar component with all these compounding variants, without creating code that’s just as complicated or even more complicated. I’m genuinely interested in seeing different options ❤️
Yes this is absolutely a solution as well! As long as it works for you - go for it! It starts to become a bit more complicated if you need those compound variants. But perhaps that doesn’t apply in your case. CVA is also not a lot more than concatenating an object into a string indeed. 🔥
I find tailwind messy. I mean whenever I have to style a component differently for different screen sizes and for different state like hover, focus, etc etc it just become annoying. I used bootstrap for many projects and its long class names are annoying but tailwind is just next level. Tailwind gets more annoying when using with react and you have multiple props and eventhandlers.
I feel you… kind of having a hate love relationship with it. But if you start building products with it, it somehow feels suuuper natural to write and you build things really fast 🤔
also, maybe a small criticism... if you are planning to include you talking in the video... it is highly disturbing and creepy when you are not looking directly into the camera but slightly off ;)
Haha yeah you're right. Never thought it would be SO hard to look straight into the camera and not get distracted by the screen of the camera.. 😅 I hope my latest video is again an improvement though 🙏
What I got from this video is how limited tailwind is as a style solution for the component era. I think that open prop styles is a better way of creating component styles. The fact that you need a library to use a library to author css says it all. Tailwindcss is very difficult to manage and if you ever have to go back and tweak styles it’s very very time consuming. There is no css peak for tailwind so you have to read every element class attribute. One other thing is I see so much more bloated markup in tailwind projects as devs try implement styles. After many years of using tailwind its main use case for me is prototyping. Writing tailwind is very very fast. Maintaining tailwind very very painful. Each to there own and we’re spoiled for choice.
I will never understand why people try to make components deal with styles???? Why do you feel the need to pass all these different props tot he component? They should be classes and not props! text ... and all presentation should happen in the CSS... no need for crazy props logic and crowd the business logic with presentation!!! Separation of concerns! Even the above scenario should not happen... the sizes and styles (solid, outlined, etc) should be defined by the context (so you have a modal window or primary toolbar, etc)... Such an anti-pattern
You are using the same argument people used for years against having JS and HTML in the same file. Style is as much part of a component as its structure and its logic, it's separation of concerns, not separation of technologies
Amazing quality, very well explained. You're going places man. Keep it up!
Thank you so much for your kind words 🥹
we need more content like this. like developing a design system and all. You jus earned a sub from me, I hate myself for not discovering this tut a long time ago.
so cool to see someone telling more about stiches
Great video. Explained very well - thankyou. I agree this is a problem with Tailwind to make it DRYer for common components.
This is very awesome! I'm creating the project of my company and I will try using this CVA lib. Thanks for the video.
Great tutorial! Exactly what I wanted to learn about CVA. Subscribed!
Maaan you're so underrated. I love your contents!
Thank you so much, really appreciate it!
Tailwind + CVA replace Stitches in my favorite stack. It has all the benefit of static CSS, atomic CSS and the reactivity of CSS-in-js without the tradeoff of CSS-in-js 🤌 happy to see more people using this combo
Thanks for the content, really good! I've been using this CVA with TW and it is really good. I wasn't able to set a required prop though and would love to see a video about that.
Thanks!!
Unfortunately making a prop required isn't something CVA offers out of the box. Their own docs suggest creating custom types for it. A bit sad, but that's what we have to live with: cva.style/docs/getting-started/typescript#required-variants
@@frontendfyi Nice, will try it! Doesn't look easy though 😂
Very true unfortunately :(
Great video, Thank you
I've been following along with you but my outline isn't working.... Where might I be going wrong?
Also, do I need the compound stuff?
hello thank you for binging that issue in github about negation and arrays even thought i dont understand what exactly (all i know is somthing good) is but happy that he merge it and add it as feature thank you soo much
I find tailwind creating the problems that we had in the past and already got solved after less and sass got introduced. Back when jQuery was what react is today and grunt/bower/gulp the mainstream, tailwind popularity is so strange it's "best practices don't work, just get it done" or the shiny new thing for this decade freelancer solo devs working on one-off projects . It does the job and I respect that, but ease of maintenance it's the most important part of a project for a true company product and the mess tailwind creates on big codebases plus multiple developers on a project just makes it a no-go. I've tried but it usually never goes well on the big real world projects
I agree with the mess. I’m also still not fully convinced on using tailwind in large projects. Tailwind is so flexible that it’s way too easy to add a simple inline style of exception to a component. Before you know you have exceptions everywhere, and no consistency at all.
I think CVA can at least help a little bit with this. But I totally understand where you’re coming from.
Tailwind is just for people that don't know css
Being a big fan of tailwind, this is a difficult truth to admit; but I totally agree…
100% agree, tailwind is mostly a meme for bedroom developers in their 20s who think they know better
Lol tailwind is the easiest to maintain of them all. Have you worked on projects with large css, you worry about a lot of things and breaking stuff, in tw you just care about which specific element to update which significantly reduces time and complexity of delivering features
I'd recommend using `tailwind-variant` package instead of `cva`. Straightout upgrade.
I figured out I will just write BEM when I have too much variants and do everything else with Tailwind
Yeah this is definitely an option as well. Only when working in bigger teams with more people I’m still worried people will make a mess, since there’s again not really any boundaries on how to use each tool, and when to use which tool 😳
But definitely use BEM for these cases if this suits you yeah! 😁
@@frontendfyi love the channel btw, I think you are going to go far with this level of quality
So kind of you 🙏 Thank you so much!
@@frontendfyi then you create ultra multiple classes with bem same with tw. Lol
Thank you for video. Unfortunately, CVA isn't working as I expected for even though I set everything up according to your video. For my compoundVariants, when I combine primary and outline (which is a boolean), the className "text-primary-500" doesn't work :(
In my Chrome Dev Tools, I can see both text-white (as defined in my variant primary key values) and text-primary-500. I'm using this in an existing project with Tailwind setup correctly and working everywhere else. What am I doing wrong?
This is because of the order Tailwind bundles the classnames. text-white is later in the CSS file than text-primary-500, causing the text to be white. The best way to solve this is by using the package tailwind merge. See this example for using it in combination with CVA: cva.style/docs/getting-started/installation#handling-style-conflicts
@@frontendfyi Thanks! I’m using the tailwind-cn package. It’s really a blessing
To a component that we don't know if it will be make larger. Is this the best option?
I wouldn’t start out with this. Only refactor to it once it makes sense, because this also brings some extra cognitive overhead when working with this component.
As long as it’s only a few conditional classes, just stick with that.
I forgot to add awesome video buy the way…. Great presentation skills
Thank you so much!
nice tutorial!... keep it up!
This got me excited. Thank you.
🔥 Let me know what your experience ended up being 😁
@@frontendfyi Will definitely do.
Gracias profe :)
I discovered your channel with this video
The code editor font-size was barely big enough to read on my phone :(
Thanks for your feedback! I will give this another thought. Zooming in one extra level makes it so that I need to scroll a lot in the editor. So I’m not sure yet what the best solution is..
Awesome video, thanks a lot!
I ran into this just the other day. Will try but with vue. Doy you ever touch vue? I find that d iesigners resonate more with vue as they have notions of html.
CVA is not React specific, so it should definitely work!
Apart from that I have little experience with Vue, mostly worked with React mainly because of better typescript support and a big eco system (TS support recently improved for vue as well I believe).
@@frontendfyi Yes Vue 3 takes it to a new level. Great content. I went from angular, to react, now Vue. I also tried svelte a bit. Will try this CVA in vue3 in a video and let you know. Great to see Design/UI frontend concerns around here
Is there any way in tailwind css to obfuscate my css classes in html so no one can just copy my design from the page? I used sveltekit, postcss and vite.
You could use @apply and abstract your styles in a CSS file. Although the use of this method is kinda of discouraged by the Tailwind team. tailwindcss.com/docs/reusing-styles#extracting-classes-with-apply
top-notch video. thank you
Thank you for commenting 🙏
This is interesting, thanks for sharing
Thank you!
Still new to React and Next. How would you support both buttons and anchor tags? Since you typically use anchors/Link component for routing between pages/to external sites/to scroll to elements by id while buttons are for other actions.
Great question again! Should probably be a perfect topic for a future video. I wrote it down 😁
For now I've created a playground that hopefully explains this to you. Let me know if it's helpful (sorry for the long link, couldn't get my link shortner to work quick enough with this hash link 😅 - oh, and I see RUclips also doesn't really like it, haha. I guess you will manage 😉)
www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAJQKYEMDG8BmUIjgcilQ3wG4Aoc4AOxiSk3STgCEBXGGCagQQGd2nbgAUcYPnCQAPOtQAmE5OhgA6QV2oAJACoBZADI9OUYACMOSPgB4dB9dwCiAGyQgktAHxwA3uTj+4AHpAuG0AC2AJMCIAN3cYCQBPCDY4bFw4FDk5GgBzTOo4MKJMOGiIMDhuTLgiFCc4cyFqABoCuUynPgg4Oicu3sSwSzQTMHgYMJR4U0S4AGtqCAB3PL8A4IKikrhIuAA5AHltTqcVpA6w+iQ2yenMiW7qlAkUQuKkUr2wF74LtuACUGwzgq36jWY9l4fB41DQYWgogqfHW-k2bw6S3gUP4UKR4gKiRA0CQKlR20+AH4AFxwahIOJQCgAX0oNDoDCYrA4Gn4sPhiLEEmksgUiGIqn5CKgtkMxjMFmssql0GcrniXl8AQpmFpfBgJmouRZlBgQ0hPJEQrgAF5uc1cZbqPiJAAfe28mFw6UuijkNDcfUe6p2gAU3nhwCcciIrTgKgT5XEzNpeKFAEpbZryZtwnt4Ug0PNOt04CAUPNLMCRmN4FMwGBEgD4EtllFra2qtQnHMA7QUDR28jTucOs9Cm8BVAydrgKVQ2bhhBSkm+CoPqUbVuCPrDbl8JmtdqAkQYGwoIUrCgfAmVKvmR4IxFo7HmVZAigPOTmX7tafz5eTQaDeiZCg+T5RjG7hvoEQHcF+rKUJsACqfAoLkSD+oG8AAGKTokADCuCQPStC2nAoaZjaXihuSVhfseARWFCXYEU4wBFja3iUVmPjMg+eYSLGcj0K8tSoA0cHUO+UIMYxcDMU6Oo2gARIEKkeIJ4nyKJWyTtKEJoCgbB-LsEhTK87wlDJTpyf475fumpBAA
@@frontendfyi Thanks a lot this is great and I'll be sure to bookmark the link and keep up on future videos. Unfortunately I haven't gotten too far into Typescript as I still want to polish up my Javascript. I also don't want to put too much on my plate. Learning a lot of things rn. I've attempted to use it for a project but learning how to use it properly while also learning react + next + next-auth + prisma + whatever else just makes it too much (Trying to make a bug tracker. Might be too big of a project since I'm still early into learning next and react). I really want to get into it though. I come from loving C# so I like having types + the intellisense is so much nicer.
I'm still trying to think of good projects to create. Trying to become at least a front-end developer for now. Thought I would go all out and make a bug tracker though as my first big project. Then create maybe a landing page as a smaller project? Not too sure. Got my website done but I just need to practice and create some projects to throw on there.
Amazing to hear all the steps you’ve taken already! Definitely don’t be too hard on yourself. You can add typescript in and use it for example for 90% of your code, and stick with any or even a JS file for the hard parts. Even that already brings you a lot of benefits! 🙏
Keep an eye out on a discord server I will soon announce. Perhaps I can be a bit more of help to you there as well 👍 I will mention it’s release in a video soon (hopefully the next one), and also add a link in all descriptions.
@@frontendfyi Yeah for sure. I'll join the discord when you announce it
great stuff
Amazing video 💪
Thank you so much 🙏
CVA is great, however how did you handle the responsiveness? The way recommended in the package? From my perspective there should be a better way to do it
For the responsiveness I usually use all the md: and sm: classes of Tailwind. So that way you handle the responsiveness with classes as well. Hope that answers your question.
Thx for sharing
Thank you! 🙏
wow... ty very much.
Congratulations, you're using CSS with extra steps
Subscribed
What a madness 🤯
Just use plain css and css vars... it's so much simpler
I would love to see you build a similar component with all these compounding variants, without creating code that’s just as complicated or even more complicated. I’m genuinely interested in seeing different options ❤️
good video but you should look at the camera lens next time because it looks like you are talking to someone else lol
👍👍👍
You can just use scss
Cool content, but my god tailwind looks so ugly when u need to make custom components
I am using plain objects with tailwind-merge and clsx, const variants = {
primary: "bg-violet-500 text-white",} variants["primary"]
Yes this is absolutely a solution as well! As long as it works for you - go for it! It starts to become a bit more complicated if you need those compound variants. But perhaps that doesn’t apply in your case.
CVA is also not a lot more than concatenating an object into a string indeed. 🔥
The best solution is removing tailwind from package.json.
I tried it just now, but the build broke. It couldn't generate any styles anymore. Help 🤯
sanks
I find tailwind messy. I mean whenever I have to style a component differently for different screen sizes and for different state like hover, focus, etc etc it just become annoying. I used bootstrap for many projects and its long class names are annoying but tailwind is just next level. Tailwind gets more annoying when using with react and you have multiple props and eventhandlers.
OR logic would just be null || outline
Even this doesn't feel... right to me, tbh... Tailwind is just a mess, imo...
I feel you… kind of having a hate love relationship with it. But if you start building products with it, it somehow feels suuuper natural to write and you build things really fast 🤔
Don't say that of my son 😭😭😭😭😭
Good video +1 like +1sub
also, maybe a small criticism... if you are planning to include you talking in the video... it is highly disturbing and creepy when you are not looking directly into the camera but slightly off ;)
Haha yeah you're right. Never thought it would be SO hard to look straight into the camera and not get distracted by the screen of the camera.. 😅 I hope my latest video is again an improvement though 🙏
What I got from this video is how limited tailwind is as a style solution for the component era. I think that open prop styles is a better way of creating component styles. The fact that you need a library to use a library to author css says it all. Tailwindcss is very difficult to manage and if you ever have to go back and tweak styles it’s very very time consuming. There is no css peak for tailwind so you have to read every element class attribute. One other thing is I see so much more bloated markup in tailwind projects as devs try implement styles. After many years of using tailwind its main use case for me is prototyping. Writing tailwind is very very fast. Maintaining tailwind very very painful. Each to there own and we’re spoiled for choice.
Except CVA's use cases aren't limited to Tailwind
I will never understand why people try to make components deal with styles???? Why do you feel the need to pass all these different props tot he component? They should be classes and not props!
text ... and all presentation should happen in the CSS... no need for crazy props logic and crowd the business logic with presentation!!! Separation of concerns!
Even the above scenario should not happen... the sizes and styles (solid, outlined, etc) should be defined by the context (so you have a modal window or primary toolbar, etc)...
Such an anti-pattern
You are using the same argument people used for years against having JS and HTML in the same file. Style is as much part of a component as its structure and its logic, it's separation of concerns, not separation of technologies
@@asimpleguy2730 how is that a same argument? I don't mind having the css in the same file
I truly believe the real solution is to stop using tailwind