What Is cn() || Use clsx & twMerge With React || shadcn/ui
What is cn in shadcn/ui? How to create your own cn() function? What cn() utility function is made of, and how can it be useful to web developers? Let us learn all in this video with hands-on coding and building our own cn() function.
Learn how to create a cn() utility function with clsx and tailwind-merge to use in a ReactJS application. You will also gain immense confidence in understanding shadcn/ui components after watching this video.
Let's GO 🚀
Timecodes
0:00 - Introduction
00:33 - Sneak Peek in shadcn/ui component
01:07 - Conditional Styling with clsx
04:11 - Tailwindcss class merging with twMerge
07:13 - What is cn()? How to create?
09:15 - cn() with Variants
11:17 - Look back to shadcn/ui component
12:10 - Passing additional classes
13:25 - What's Next?
Source Code on tapaScript GitHub:
Create your own cn(): https://github.com/atapas/explain-cn
Join tapaScript Discord
/ discord
🤝 My Links:
Blog: https://blog.greenroots.info/
Follow on X(Twitter): / tapasadhikary
Connect on LinkedIn: / tapasadhikary
Follow My Work on GitHub: https://github.com/atapas
Follow on Facebook: / tapasadhi
Special Links:
Are you looking for the best NextJS templates to start your project development? Download and use them for FREE: https://www.wrappixel.com/templates/c...
If you are looking for the best content management system, here is something for FREE that you can rely on: https://app.caisy.io/app/signup/mwiyy...
👋 Like my work? Thank You. You can sponsor me from here:
Sponsor Me: https://github.com/sponsors/atapas
Sponsor my Blog: https://blog.greenroots.info/sponsor
About Me:
Tapas Adhikary is an Educator at tapaScript, Tech enthusiast, Writer, YouTuber, and Open Source projects maintainer/contributor. He is a full-stack developer who has vast experience in building SaaS solutions. He is the founder of the ReactPlay platform, which is driven by open-source projects and a fast-growing community.
You can find more about him at https://tapasadhikary.com.
#react
#reactjs
#tailwindcss
#shadcn
#css
#webdeveloper
