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
Steps: 1. Define color variables in global.css 2. Include above variables in tailwind.config.js 3. Use variables in classNames in components for styling colors 4. Use states for adding and removing color variables classes in main or html or body components dynamically
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!
Definitely is all that i need to know, thanks bro!
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!
great explanation and clear concepts thanks for it✨
Glad it was helpful!
amazing tutorial, keep doing these!
Amazing .Great job
Steps:
1. Define color variables in global.css
2. Include above variables in tailwind.config.js
3. Use variables in classNames in components for styling colors
4. Use states for adding and removing color variables classes in main or html or body components dynamically
How to do it with native wind in expo react native?
Helpful!
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 ?
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 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
Really useful video
Glad to hear it!
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.
Can this approach be applied in React, or is it only applicable in Next.js?
Yep this will work in normal React
3 days ago.... Pages, thank you!
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.
Thanks!
Thank you
Thanks for stopping by, hope it was helpful
I expected :has selector to follow in tailwind configs.
content is good but man very irritating voice
very annoying breaking voice