bro you must change your channel name to Gold Mine , after 4 months searching on google and youtube you are the only one who save my life thanks please can you make more tutorials like this you deserve the subscribe and the like
bro i want to use the primary of tailwind, like bg-primary-100, bg-primary-200, 300 and so forth. but i would like that primary color to be dynamic, allow the user to choose between tailwind options, like blue red green indigo cyan etc can i do that ?
You can layer them as separate classes on your parent div (e.g., body). Then in the CSS, for each theme define light and dark styles as needed. E.g., .theme-orange {} and .theme-orange.dark {}
You can use the exact same technique for fonts. Just setup CSS variables defining the fonts in each theme, and then in the tailwind config override the fonts instead of colors.
This was very well explained and I’ve been looking to do just this very thing! Thank you very much and great work!
Glad it was helpful!
great explanation and clear concepts thanks for it✨
Glad it was helpful!
bro you must change your channel name to Gold Mine , after 4 months searching on google and youtube you are the only one who save my life thanks
please can you make more tutorials like this
you deserve the subscribe and the like
Appreciate the support!
amazing tutorial, keep doing these!
Helpful!
Amazing .Great job
3 days ago.... Pages, thank you!
Ever heard of shadcn/ui? Good explanation of how it works...
I'm a fan of shadcn/ui. I've got some videos coming up that'll use it, so stay tuned.
bro i want to use the primary of tailwind, like bg-primary-100, bg-primary-200, 300 and so forth.
but i would like that primary color to be dynamic, allow the user to choose between tailwind options, like blue red green indigo cyan etc
can i do that ?
Really helpful video! By the way, could your tell me how to set up vscode to show the errors on right side of the line like your video?😁
I use the "Error Lens" extension in vscode
Thanks!
any tips for combining this approach with what you showed in the dark-mode video ?
You can layer them as separate classes on your parent div (e.g., body). Then in the CSS, for each theme define light and dark styles as needed. E.g., .theme-orange {} and .theme-orange.dark {}
Really useful video
Glad to hear it!
great video, but 1 question how we will change color if our color exist in db?
Get the value from DB, findIndex in the array, and set it as default instead of 0 in useState.
Hope you can figure out how to configure font family
You can use the exact same technique for fonts. Just setup CSS variables defining the fonts in each theme, and then in the tailwind config override the fonts instead of colors.
Thank you
Thanks for stopping by, hope it was helpful
I expected :has selector to follow in tailwind configs.
Can this approach be applied in React, or is it only applicable in Next.js?
Yep this will work in normal React
content is good but man very irritating voice
very annoying breaking voice