Building a design system in Next.js with Tailwind!

Part one here: • Tru Narla: Building a ...
Repo for project here: github.com/tna...
me:
twitter: / trunarla
tiktok: / mewtru
instagram: / mewtru
twitch: / mewtru
business email: [e-mail]
// tags- #softwareengineer #womenintech #programming #nextjs #javascript #designsystems #tailwindcss #tailwind #typescript

[@fantomgaming9018]

When we will get Nextjs 13 tutorials? 🤔

[@mewtru]

Is this something you’d like to see 👀

[@olawumisegun5898]

@@mewtru Yes, I'm interested. Thanks

[@lofi_boys]

@@mewtru yeah, and with typescript. Love it but don't know how to use it

[@dominicvanalmsick1056]

omg you rock!!! Getting more sophisticated with component abstractions (if that's the right way of putting it) has been a real hurdle for me. Haven't found anyone explaining and demoing this as clearly as you!! You've just got a new superfan :)))

[@mewtru]

Yay, thank you! Glad you enjoyed :D!

[@KevinNaughtonJr]

Awesome video Tru!!! Excited for the next vid NEXT WEDNESDAY

[@mewtru]

Ahhh so many videos!!! 😩

[@ShakirSamoon]

Wow your explanation is on point. Great stuff.
And love your vscode pet 😄

[@mewtru]

Thank you so much!

[@samuelerbo]

This is awesome. Thanks!!!

[@CanRau]

This is so nice in UnoCSS they have groups so you can do md:(w-full border-4) etc

[@norliegh]

This is really cool & now I can finally build some good components. Can we have some awesome videos up next on design and maybe even typescript magic!! This was helpful. Thank You! ✨

[@mewtru]

I can definitely try! Glad you liked the video :D!

[@Pyrospower]

Great video!

[@KevinNaughtonJr]

Also storybook is goated

[@krumbo]

Very useful content. Subscribed.

[@lukeskywalker7029]

Hey mewtru,
thanks for making another great video on design systems in NextJS with TailwindCSS & StorybookJS!
It would be lovely to see your approach and workflow on a new (example) project with the tools presented.
Stuff like: What boilerplate do you typically use? Which components do you build with CVA and what your rule of thumb to do it rather than going for plain TailwindCSS? For which components do you write storybooks and what is the rule of thumb on including a component?
How to include complex and/or multi-step forms in Storybook?

[@m1kash]

Thank you for the video. It's heplful. Why not use components with the directive @apply and css modules? Could it be outdated already?

[@miguelcosta4450]

Hi mew! I remember you have installed a pretty icon theme for vscode but i don't remember...

[@aaronemery7798]

This is awesome! I literally implemented something like this from scratch using a theme file full of json and then read a theme string i passed in. This does the same thing so much cleaner and is WAY more maintainable. I'll def adding this to the codebase i'm currently building out.

[@mewtru]

I’m glad it helped you!!! I like this a lot too :)

[@kelvinmusselli7066]

It's possible to publish in npm and use in another project next?

[@nickstrands]

It just hit me ... is that package just a very cheeky Loki reference?

[@mewtru]

Omg wait which package???

[@nickstrands]

@@mewtru class variance authority? isn't it an Easter egg for the TVA in Loki?

[@felipegouvea6141]

yeah but how do we generate this? like, publish

[@pavankumard.r5893]

Love that color theme 😍
What's the extension name 🤔

[@mewtru]

It's moonlight!

[@taunado]

Thanks. +1 for 'more content like this'.

[@taunado]

To expand - I'll love to watch more videos on professional design systems using Typescript, NextJS. PayloadCMS released a great build series if anyone's interested.

[@DanteMishima]

Also, the code isn't up to.dstr

[@sillyleo]

I want more video thanks!

[@arrteann]

Really its great

[@iUmerFarooq]

Why not Nuxt Js?

[@DanteMishima]

I'm trying to get my outline to work, but it's not applying the text colour.... The border applies but the text is staying white

[@aishahsofea3128]

storybook tailwind dark mode is not working for me, and it seems like the plugin is not included in the repo. can anyone point to me an example of a working dark mode toggle please? thank you

[@delc82]

Hello! Could you recommend a NextJs tutorial?

[@8ctrl763]

I am a bit confused can you please tell me why use a whole library just to manage local storage, I can do it with a few lines of code right?

[@ignacioarriagadairiarte4338]

What is your vscode theme?

[@avi12]

3:12 The breakpoints are also similar to Bootstrap

[@iamprincemuel]

This was interesting and insightful. I will be integrating this into my current setup workflow

[@davidkawogo3681]

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

[@mewtru]

So TailwindCSS doesn't come with components like select, you'd have to build those yourself. It just provides utility classes to write basically css. You could use something like headlessui.com/ which is also built by Tailwind!

[@miskhill1]

Amazing Tru content as always! 🎉

[@DioArsya]

Wow amazing!

[@idanmasas]

Love your videos!

[@darenbaker4569]

Thank you for this great video, loved your first one unless I missed others. But can we have some more as this is so inspirational

[@mewtru]

Just the one other video :)! Of course! Trying to do one video a week at least

[@PhilipAlexanderHassialis]

Happy new year Mew! Also also, *took you long enough*

[@mewtru]

Bruh ;( haha happy new year!!!

[@k-mal184]

Content game on 🔥
Great vid Tru

[@mewtru]

Thank you!!!

[@leonela.2618]

where is the part one? xd

[@matteol4]

in description ? xd

[@juanleodev]

@@matteol4 of course xd

[@lko_]

Anyone knows the typeface name?

[@mewtru]

Monolisa :)

[@k-mal184]

Monolisa just might change your life. I’ll never look at typeface the same again 😂

[@foreveralone499]

I'm here to see you, the way you talk 😌
Not for Code 😐

[@JustSall]

(Dummy speaking:) was really helpful, would try implementing this on my next project. 🫰

[@mewtru]

Yay! I’m glad it’s helpful :)!