Thank you sooooooooooo much!! I've literally spent the last month thinking and researching ways to use tailwind as the foundation for a component library. The mention of CVA is worth the price of admission alone. Please upload a repo for this
I watched your video... double-blined over clsx, gasped at cva and said 'oh daaaamn' at the Zod usages. Really great video. Love your energy, insight, style, and tutorial. Super job.
Coming up with a component library that I'm happy with has been a HUGE pain, this video would have been SO helpful like 3 months ago when I decided to move off MUI. This is a great overview of the component library problem.
@@bilencekic It's not bad at all. It totally depends on your use case. If your project requires you to heavily reset your chosen framework styles then you're better off building design system from scratch.
@@bilencekic if you're more of a infrastruture (backend) core dev. stay with mui as it'll let you focus more on the backend and ui won't be much of a hassle. however, it'll limit your creativity. if you want complete control of you ui. build one from scratch.
@@norliegh thanks man! i was thinking exactly same. I bought a MUI template from mui webpage and i can easily build all the pages i need easily including reports+ validations + day/night switch etc. Datagrid control is awesome since i deal with big size of data. Everyting is really perfect. That was the answer i need. thank you. for now product's usability is important for me :D and it gives me that much of flexibilty
Hi everyone! It’s Tru from the video! I’ll have a repo up soon so you can take a look at the code :). Thank you all for watching! And for those who are opposed to tailwind, this is just one solution, and for those who are mad at the intro, what can I say I’m a popular person 😎
Lovely presentation! I've been playing with Tailwind a bit recently thanks to not having a project with my current company. This is super helpful actually!
The ButtonOrLink component is seriously the best takeaway from this video! Thanks so much, I was banging my head on the desk for ages trying to come up with the best way of solving this.
🎯 Key Takeaways for quick navigation: 00:08 🌟 *Introducción a Design Systems en Next.js con Tailwind* - Definición de un sistema de diseño. - Opciones para implementar sistemas de diseño: bibliotecas preconstruidas vs. crear uno propio. 02:03 🎨 *Personalización de Tailwind CSS para el sistema de diseño* - La flexibilidad de Tailwind CSS para personalizar estilos. - Ejemplo de personalización del color de la marca en Tailwind. 03:28 ♿ *Consideraciones de accesibilidad en el diseño del sistema* - Uso de bibliotecas de accesibilidad como Headless UI. - Importancia de la accesibilidad en el desarrollo de componentes de diseño. 05:25 🔗 *Integración de TypeScript, Alias de Ruta y Storybook* - Uso de TypeScript con alias de ruta para componentes de diseño. - Implementación de Storybook para probar componentes de diseño de manera aislada. 06:52 🚀 *Demostración práctica del sistema de diseño en Next.js* - Visualización y personalización de botones con Class Variants Authority (CVA) y Tailwind CSS. - Uso de componentes accesibles con Headless UI en la demo. 13:17 👋 *Cierre y recursos adicionales* - Información de contacto y redes sociales del presentador. - Finalización de la conferencia sobre sistemas de diseño en Next.js con Tailwind. Made with HARPA AI
Still hate it. Ugly markup. Non contextual classes. Need to configure a lot of shit just to have granular control of a custom figma design, which already have most of the CSS given to you.
that was awesome thanks shed some good light on how tailwind could really help, it just seems so convoluted for writing just css but I guess you get use to it
Bruh, you all are trying hard to make her feel smaller. Try gifting our community by mentoring instead of BSing in the comments. Why would your 9yo career inflate your ego so much when you aren’t mentoring others with your senior knowledge? Great job Mewtru 💪🏻
CSV looks amazing. I’m always in trouble handle all the props and style variations. Thanks for sharing! I’m chillin on my couch but now I have to try this things out 😂
Hi I see on your storybook that you have null value for button variants under controls. I'm also having it in my storybook, but example button doesn't have that. This comes from inferring CVA props into button. How can I either remove that null value from Storybook controls, or when clicked to fallback to default value? An shouldn't those inferred types be strict, not involving null and undefined? Thank you
Really nice to see your content. I was just trying to enable tailwind in a project and with this tutorial i learned alot on how to do define your stylings.
I love that you define the design system as a *bridge* between designs and code. A design “system” that only lives in the design or only lives in the code is not a design system.
@@michaelflores23 Well what Tru defines as a design system is actually a ui kit. A ui kit exist of reusable components, icons, colors, etc. A design systems is a framework for how to use those components and defines rules what is allowed and what is not. For example radix ui is a ui kit because it has a bunch of components that can be reused everywhere but material design is a design system because it describes how each element behaves, for example every element is made out of solid material (that's why its called like that) and cannot pass through each other nor behaves like a liquid and has it's own elevation usually represented with it's shadow (more = higher up)
@@Chris-zt4ol right, a kit with rules about how to use it maybe become a system. Still curious what analogy you might use in place of the bridge (agreeing with your point btw)
can someone help me where i can i find a select input in tailwind, this is so much easier with tools like select2 with jquery, i really like to use tailwind, but the overwhelming of creating everything from scratch is killing me
Great video! I'm always struggling into decide if using a well testes open source UI components library like Chakra, Mantine, Mui, or to develop one from scrath. What's stand in front to go from the scratch solution is a lot of UI components library are not giving you styles but sometimes accesibility, community approved UX patterns, accesibility, hooks (if React) and help you in building complex components (for eg, a calendar picker). Even with this drawbacks would you consider going scratch? I like the mix approach of RadixUI plus Tailwind but I heard from people having problems integrating Tailwind with Radix. Another mix choice would be using TailwindUI components which is kind of a rich extension of what Headless UI is. This is topic for me that I don't have a definitive choice fir sure.
@mewtru I was facing issues with variants when I tried building components with tailwindcss few months back, this video was helpful, will be following up your work
How does the bundling work as a library (monorepo or independent repo)? Does it include all the components not required for the page, or only load components required for that page?
This girl is a professional ❤️ She knows what's she is doing. Good to see her. I am currently designing my own design system and I learnt new things. Very helpful 👍
Do you know what concept I can study to understand how your 'ButtonOrLinkProps' are just "basic button props" (mentioned at 8:39 )? I'm not too learned in typescript and props, so getting 'className' to apply to the button (not throw errors) is proving beyond my declarative capabilities in my own speculative version of your "ButtonOrLink.tsx" import and what it contains. Thanks for this great overview it really tied a lot of things together for me, and storybook is great.
Seems like a okaish way, i would prefer to build the components with scss or postcss with classname and variant utility function predefined in my utils file. Why to junk up the js bundle for this simple thing. Keep in mind ive use material, chakra etc too. I can use tailwind if i dont wanna spend time on creating the design system.
The idea is really cool, but tailwind has really bad readability x_x. I use it just for small stuff, but for a whole Design System, I still prefer to use a lib that keeps closer to CSS syntax.
The video title should be "why I like Tailwind more", I thought she will show us how to structure a design system / best practices or something like that with Next.js
I’m trying to be convinced that there’s a better pattern than CSS Modules but haven’t found anything better yet. I’m someone who likes going easy on the utility classes so I’m biased.
I'm almost upset I haven't come across your work and online presence earlier! So much good information packed into a short span of time! Kudos
Thank you sooooooooooo much!! I've literally spent the last month thinking and researching ways to use tailwind as the foundation for a component library. The mention of CVA is worth the price of admission alone. Please upload a repo for this
I watched your video... double-blined over clsx, gasped at cva and said 'oh daaaamn' at the Zod usages. Really great video. Love your energy, insight, style, and tutorial. Super job.
Hello Tru! I didn’t know you but as a senior FE Engineer I clearly recognized your expertise and knowledge. Will follow you for sure ! Best
Thank you so much :)!! Means a lot
Coming up with a component library that I'm happy with has been a HUGE pain, this video would have been SO helpful like 3 months ago when I decided to move off MUI. This is a great overview of the component library problem.
Thank you!!!
bro i just move to MUI recently :D is it a bad decision ? i found it very simple and rich component library.
@@bilencekic It's not bad at all. It totally depends on your use case. If your project requires you to heavily reset your chosen framework styles then you're better off building design system from scratch.
@@bilencekic if you're more of a infrastruture (backend) core dev. stay with mui as it'll let you focus more on the backend and ui won't be much of a hassle. however, it'll limit your creativity. if you want complete control of you ui. build one from scratch.
@@norliegh thanks man! i was thinking exactly same. I bought a MUI template from mui webpage and i can easily build all the pages i need easily including reports+ validations + day/night switch etc. Datagrid control is awesome since i deal with big size of data. Everyting is really perfect. That was the answer i need. thank you. for now product's usability is important for me :D and it gives me that much of flexibilty
Hi everyone! It’s Tru from the video! I’ll have a repo up soon so you can take a look at the code :). Thank you all for watching! And for those who are opposed to tailwind, this is just one solution, and for those who are mad at the intro, what can I say I’m a popular person 😎
Hey quick question how were you able to handle responsiveness as CVA itself doesn’t provide an api for it?
@@enyelsequeira3619 Tailwind can help with the responsiveness
Lovely presentation! I've been playing with Tailwind a bit recently thanks to not having a project with my current company.
This is super helpful actually!
@@enyelsequeira3619 there are utility classes in Tailwind that can help you with it (sm:, md:, lg:, etc.)
I know that guys. Just wondering if it would be possible like stitches, currently under their repo, it says it doesn’t support it
The ButtonOrLink component is seriously the best takeaway from this video! Thanks so much, I was banging my head on the desk for ages trying to come up with the best way of solving this.
She never talked about it though... I need to figure out how it works.
This content is insane! After watching this I feel like I've been living under a rock...
Finally chanced on your videos... I've been following you on Twitter. I really had a wide smile on when I saw you here...
🎯 Key Takeaways for quick navigation:
00:08 🌟 *Introducción a Design Systems en Next.js con Tailwind*
- Definición de un sistema de diseño.
- Opciones para implementar sistemas de diseño: bibliotecas preconstruidas vs. crear uno propio.
02:03 🎨 *Personalización de Tailwind CSS para el sistema de diseño*
- La flexibilidad de Tailwind CSS para personalizar estilos.
- Ejemplo de personalización del color de la marca en Tailwind.
03:28 ♿ *Consideraciones de accesibilidad en el diseño del sistema*
- Uso de bibliotecas de accesibilidad como Headless UI.
- Importancia de la accesibilidad en el desarrollo de componentes de diseño.
05:25 🔗 *Integración de TypeScript, Alias de Ruta y Storybook*
- Uso de TypeScript con alias de ruta para componentes de diseño.
- Implementación de Storybook para probar componentes de diseño de manera aislada.
06:52 🚀 *Demostración práctica del sistema de diseño en Next.js*
- Visualización y personalización de botones con Class Variants Authority (CVA) y Tailwind CSS.
- Uso de componentes accesibles con Headless UI en la demo.
13:17 👋 *Cierre y recursos adicionales*
- Información de contacto y redes sociales del presentador.
- Finalización de la conferencia sobre sistemas de diseño en Next.js con Tailwind.
Made with HARPA AI
You basically saved my job. Thankyou 😭❣💯
There are two types of people
- Those who love Tailwind
- Those who hated Tailwind but now love it
I still don't love it ahhaah but I can see the benefit in certain use cases!
Still hate it. Ugly markup. Non contextual classes. Need to configure a lot of shit just to have granular control of a custom figma design, which already have most of the CSS given to you.
Really loved the content. I could understand everything properly.
cva was exactly the missing piece i was looking for when building components with tailwind. I was building something like this myself.
Try Windstitch.
Cva is so good!!
This is a so influential video for me. I'll use these for every project now
This is awesome, I never thought about organizing my Tailwind work this way. Thanks! 🤟
Thank you so much :)
that was awesome thanks shed some good light on how tailwind could really help, it just seems so convoluted for writing just css but I guess you get use to it
Very good talk, Could we have the URL for the repo?
Not sure if I hate this or not yet, but this is a damn good talk, good shit.
I know I’m a little late, I’ve been busy, but this is amazing!
Bruh, you all are trying hard to make her feel smaller. Try gifting our community by mentoring instead of BSing in the comments. Why would your 9yo career inflate your ego so much when you aren’t mentoring others with your senior knowledge?
Great job Mewtru 💪🏻
thank you haha :D!
CSV looks amazing. I’m always in trouble handle all the props and style variations. Thanks for sharing! I’m chillin on my couch but now I have to try this things out 😂
Hi
I see on your storybook that you have null value for button variants under controls. I'm also having it in my storybook, but example button doesn't have that.
This comes from inferring CVA props into button. How can I either remove that null value from Storybook controls, or when clicked to fallback to default value?
An shouldn't those inferred types be strict, not involving null and undefined?
Thank you
Great presentation, cva is a game changer for keeping the design system maintainable.
Would love to see this with NextJs13’s new app folder structure. Also link to this codebase please.
Great intro to CVA, thank you so much!
I really like your way of teaching
how do you add nextjs font api to my variants?
Can you please share a link to this codebase?
Amazing content! I loved how much you can do with Tailwind and cva integrated with Typescript autocomplete.
Really nice to see your content. I was just trying to enable tailwind in a project and with this tutorial i learned alot on how to do define your stylings.
I love that you define the design system as a *bridge* between designs and code. A design “system” that only lives in the design or only lives in the code is not a design system.
It should definitely exist in both places but bridge is just the wrong word
@@Chris-zt4ol what word would you choose?
@@michaelflores23 Well what Tru defines as a design system is actually a ui kit. A ui kit exist of reusable components, icons, colors, etc. A design systems is a framework for how to use those components and defines rules what is allowed and what is not. For example radix ui is a ui kit because it has a bunch of components that can be reused everywhere but material design is a design system because it describes how each element behaves, for example every element is made out of solid material (that's why its called like that) and cannot pass through each other nor behaves like a liquid and has it's own elevation usually represented with it's shadow (more = higher up)
@@Chris-zt4ol right, a kit with rules about how to use it maybe become a system. Still curious what analogy you might use in place of the bridge (agreeing with your point btw)
whats the diff between Tailwind Variants and CVA?
can someone help me where i can i find a select input in tailwind, this is so much easier with tools like select2 with jquery, i really like to use tailwind, but the overwhelming of creating everything from scratch is killing me
Hi, what chair are you using?
thank you so much. between you and lee you guys are giving out incredible information. so greatful
Great video! I'm always struggling into decide if using a well testes open source UI components library like Chakra, Mantine, Mui, or to develop one from scrath.
What's stand in front to go from the scratch solution is a lot of UI components library are not giving you styles but sometimes accesibility, community approved UX patterns, accesibility, hooks (if React) and help you in building complex components (for eg, a calendar picker). Even with this drawbacks would you consider going scratch? I like the mix approach of RadixUI plus Tailwind but I heard from people having problems integrating Tailwind with Radix. Another mix choice would be using TailwindUI components which is kind of a rich extension of what Headless UI is. This is topic for me that I don't have a definitive choice fir sure.
Great content 💯. BTW does anyone know what font is that ?
Really cool, definitely going to try CVA, is there an example project you can share?
Tailwind is now supported in turbopack?
Why use this cva over stitchesjs?
@mewtru I was facing issues with variants when I tried building components with tailwindcss few months back, this video was helpful, will be following up your work
great video
this offers some nice tools for working with tailwindcss that i missed from theme-ui.
thanks for sharing.
So good. Trying to study and get into frontend devrel. Had no idea about Storybook and that would help so much with large, data-dependent apps.
How does the bundling work as a library (monorepo or independent repo)? Does it include all the components not required for the page, or only load components required for that page?
My gawd. I serious need this.
Can you please do a demo on setting up Tailwind on Blazor?
Thank you Tru! Is it possible to fork this project?
cva looks nice, but is there a way to get tailwindcss intellisense working with it?
Yes, you can find a regex on the README
@@rodz what regex would you use? the variants don’t have any pattern to them
Anyone know the vscode theme name?
Amazing presentation ❤❤
I learned a lot of cool tips, thanks
This is not vim
this is true
@@swig. *tru
Where can I read more about cva?
Thanks for video. Really informative.
Top notch content. Thank you so much!
This girl is a professional ❤️ She knows what's she is doing. Good to see her. I am currently designing my own design system and I learnt new things. Very helpful 👍
love these videos, thx for the great content!!!
This is so money. Thanks for sharing!
Veré very good video
What is tour vscode theme?
Like for CVA, great library 🔥
Whoa…. You deserve a statue to be raised in every ui engineer’s backyard! Omg, this was great.
is the repo available to the public?
This is a truly cool video)
Do you use the "tailwind-merge" package?
Where is the git for this??
Beautiful explanation.
Do you know what concept I can study to understand how your 'ButtonOrLinkProps' are just "basic button props" (mentioned at 8:39 )? I'm not too learned in typescript and props, so getting 'className' to apply to the button (not throw errors) is proving beyond my declarative capabilities in my own speculative version of your "ButtonOrLink.tsx" import and what it contains.
Thanks for this great overview it really tied a lot of things together for me, and storybook is great.
ButtonOrLinkProps are basically types for a normal button which are then extended by Varient props.
Awesome! Thanks! This taught me a lot!
damn no link to creator in description
This is great! Is it possible to make it a NPM package?
can you provide github repo for it?
Amazing video! Is there any way to use cva for disabled/loading button states?
That’s a great question. Did you try anything?
Repo?
With next.js?
I use this path alias
{
"paths": {
"@/*": ["src/*"]
}
}
So i don't have to care about path alias when renaming, making or deleting a directory
Helpful video 🚀
Seems like a okaish way, i would prefer to build the components with scss or postcss with classname and variant utility function predefined in my utils file.
Why to junk up the js bundle for this simple thing. Keep in mind ive use material, chakra etc too. I can use tailwind if i dont wanna spend time on creating the design system.
The idea is really cool, but tailwind has really bad readability x_x. I use it just for small stuff, but for a whole Design System, I still prefer to use a lib that keeps closer to CSS syntax.
cva is the same as vinpac/windstitch
Source code ?
Vim?
Thank you
Learned a lot
WHY HAVE I NOT HEARD ABOUT CLSX
Great. Thanks for sharing.
can i get your repo pls.. then it will be easy to make our own from the base of yours
What developers wants isn't features, they want order and neatness
Please give us more info on this. I have been looking for such for a long time. BIG THANK YOU!!!
Thank you @Narla for this amazing content, very helpful, I really liked the vscode theme you are using, very pleasing, what's it name if you dont mind
Storywhaaat? 🤯 very cool!
not gonna lie, the whole tsx/react code makes tailwind seem way more over-complex than it is.
OMG 😳 I need this thank you 🙏.
Very helpful ty
What is that VSCode theme?
Moonlight
thank you so much
Excellent talk
Banger talk
Thank you 🤩
The video title should be "why I like Tailwind more", I thought she will show us how to structure a design system / best practices or something like that with Next.js
Did you not listen for more than 2 mins?
There’s more here than just tailwind
Just use CSS modules
I’m trying to be convinced that there’s a better pattern than CSS Modules but haven’t found anything better yet. I’m someone who likes going easy on the utility classes so I’m biased.