I was running into this just a couple days ago! What a perfect timing for this tutorial. Thank you Tailwind Labs for these videos. Please, keep coming up with high-quality materials like this.
Exploring tailwind and had thoughts few days ago: "How can I use css variables for themes" And today video appeared. Magic! Thanks TH-cam and you guys! Awesome!
I really like how flexible it is to style not only the full root document but each component individually. I already see how those variables can even be scoped inside the component itself to provide completely different styling rules for each individual component and not only colors, it basically allows for turning Tailwind into an ultimate utility-meta framework where classes become meta-information for a possible look. Requires a bit of a mental stretch in the beginning but gives ultimate powers!
I've been looking for this for very long. Thanks! It works amazingly with Next.js SSG Just a little trick: instead of asking if opacityValue is undefined, you can use a nullish coalescence operator to assign a default value when it's null or undefinded. Example... ${ opacityvalue ?? 1 }
I think your method is best one for implementing dynamic theming with tailwind CSS. I have seen bunch of other approaches but by far this one is cleanest one.
I've heard this punch from many people who hate (don't know how to use) Tailwind - that it can't be used on a "themeable project", thanks for myth-busting this argument!
Fantastic demo! You could consider setting the default transparency value to 1 in function arg where you deconstruct the opacity value to avoid the if statement in the withOpacity.
The return value could be streamlined as an implicit return, but I would at least set the default @ 22:00 with ({ opacityValue = 1 }) rather than setting a guard check
I have the feeling (but I could be totally wrong) that opacityValue is not the value itself but the name of the CSS variable for the opacity (--tw-bg-opacity)
I would just specify colors for specific states in the theme without the hassle of support bg-opacity, etc. It may seem odd, but if the idea is to give control to the theme of defining colors, then it makes more sense that it also controls the opacity. There are cases where you want to use a different opacity based on the contrast, as color is perceived differently based on the background and foreground contrast and the opacity will look lighter/darker depending on this. This is also why dark themes aren't simply just inverting the colors; contrast matters.
WOW 🤯 and thank you. I'm pretty new to tailwind, is the theming config especially the stuff related to opacity still relevant(I'm guessing YES, but still wanted to confirm)?
Just a small suggestion to make check inside withOpacity more succinct, you can just check for undefined like so opacityValue ?? 1 that way if it will be undefined it will default to 1, note that I'm using nullish coalescing operator here to support 0 values. It's natively supported in Node since v.14
Amazing video! It would really helpful if you could share a gist or repo with the code too... also would love it if you could name a few of the plugins you're using on vscode.. notably the css preview when you hover a class and the one that highlights colors with their actual color. Many thanks!!
Should my brain hurt after watching this? LOL It does. I’m sure I’ll have to watch this series a couple of times through since my CSS skills are so-so. But, that said, I’m very impressed so far with Tailwind’s approach. It seems now we finally have CSS that is a programming language than whatever it was previously.
Neat! Great video, it's well-explained and very easy to understand. Thanks! I have a question: can we use any existing tailwind colors (ie, text/bg-red-500)? Using the approach in the video, it looks like the same color may be redefined multiple times. aka, is it possible to create something like an Alias Token? Or is the only way to do this via the tailwind config (where we have access to the colors)?
... and that is it!! LOL Fantastic and you sometimes make me laugh a little which is a giant bonus; Tailwind really has a gem with you and the way you do these videos! How long did they look to find a coder that is ALSO great in front of a camera lol! Rock on!
Kinda feels like with naming colours you're getting back into some of the "naming is hard" territory that utilities were meant to solve for us. But I don't see any other way around it. I'm working on my first Tailwind application at the moment which will eventually be forked off and used as the basis for many other apps. How the follow on apps get re-coloured without a massive search and replace to change a whole bunch of utilities was on my mind, so this is well timed.
Thank you so much ❤️ for this wonderful tutorial. Would love to see more possibilities of theming. Hope we can control more looks like, border radius, background image, polygon shapes, different svg based on theme. It will bring great change in looks apart from colour alone. 👍👍 Keep rocking.
Great tutorial thank you! Quick question: is it possible to use the default tailwind colour palette in the css variables instead of the hex/rgb hardcoded values? In other words, something like: -colour-primary: Colors.red.700 Instead of -colour-primary: rgb(255,179,255)
I implemented multiple themes on a site of mine last year. 12 themes light + dark mode. It was super simple, though I _think_ this may be even easier. Can't wait to try it out! Note: not sure why my last comment was deleted? Due to link?
Any reason you are using CSS Custom Properties rather than plugins that add the utilities and use theme properties with the values defined directly in the theme?
Great video, thanks! It's a little outdated I think, as you can now define hex colours inside the tailwind config `theme`, and opacity variants will work without needing to add the logic yourself.
@18:56 Couldn't you just use Tailwind's opacity variable? Like so: 'muted': rgba( var( ---color-text-muted ), var( --tw-text-opacity, 1 ) ) Just tested and that seems to work fine! Way easier than the function.
1. To make sure your code won't break when the variable name changes 2. To reset the opacity value. Notice the generated class adding "--tw-text-opacity: 1" above. Without resetting, any bg-opacity class in the parent would persist.
Would you know a problem that i have. I used tailwind cli to make a website using the stock install procedures. The website looks and functions fine in local vsc dev, but when i upload to server to the htdocs folder all the html files and the output.css, the styling isn't applied. Could you advise.
I am thinking of using it to implement light/dark theme on user selection, so, do I have to change the wrapper class conditionally or dark:my-wrapper would work just like usual html with dark class ???
but what if i want to reuse colors from the palette like --accent-medium: theme('colors.pink.700'); and not hardcoding rgb values? theme('colors.pink.700') is hex value and I need to convert to rgb somewhere
Why split and convert the hex code to rgb values in your with opacity function instead of using the vscode plug-in? Javascript has parseint-function that can do this.
i have a problem ,if we set opacity-x for bg-theme-x not only bg opaicty changed even text opacity turn chnaged , what to do in this situation please guide
Any reason one you couldn't/shouldn't just define the theme colors as `rgba` and use the text-opacity thing directly? So instead of `--color-fill: 185, 28, 28;` and that `withOpacity` function, just do `--color-fill: rgba(185, 28, 28, var(--tw-text-opacity));`? Not sure I understand what the `opacityValue` and helper function you made does "more", and feel like I'm missing something here. 🤔
Then if you used it for a background color it would adopt the text opacity instead of the background opacity. The variable name changes depending on how the color is used, for example: That uses two different opacity variables, so if you bake it right into the color one of the won't work.
@@TailwindLabs Aaaah! Knew there had to be something I was missing. Thank you for quick reply! Started using Tailwind for the first time last week on a new side-project of mine and I'm LOVING IT 💙
I completely agree with the concept, but the css-variables suck because of type safety, I wish there was a way to enforce your themes to have the same variables
At this point, TW is not adding on top of CSS, but becoming a language of its own. Something many devs won't welcome. This is an unnecessary complexity. Good for prototyping and all, but not sure if this is something I would like in my final product.
is this still the way to go? I guess since it's over a year ago, there might be a nice approach, so don't have to use this 'unsupported' rgb format . . ?
All that function nonsense is no longer needed now. You can just use hex values if you wish. Example: bg-skin-base/10 for 10% opacity on the base background color. Wonderful improvements since 2021.
@@MD-kb8zt I did not get around to trying this out at the time. After reading your comment this morning I went and implemented it and I can confirm that / opacities etc do not work by default with the latest version of Tailwind. @zeeeeeman can you confirm this is actually working for you? If so, would you mind sharing your configurtation?
@@kieran5746 I found a solution. Look for “Customizing Colors” in the tailwind documentation then ctrl f to find “”alpha-value” and it goes over how to define your variables to use the method listed in the original comment
Try searching for a similar issue in the tailwindcss/jit github repo. If you don't find an existing issue, you can add one of your own. It could be that you are missing the NODE_ENV=development variable. Instructions for this is in the readme file in the repo.
at 22:07 (guarding against undefined) you should be able to avoid blocks entirely by using a ternary in your interpolation like so: ${ opacityValue !== undefined ? opacityValue : 1 } ... and even simpler, since opacity:0 is unlikely, like so: ${ opacityValue || 1 } (taking advantage of truthiness, even though 0 is a possible but unlikely input since it would be a strange way to specify invisibility. 🤦🏻♂️)
Was wondering about how this would be done for building a light/dark theme. Thanks! Really breaking away from IE here as it doesn't support css variables anywhere except in the root. I love this design though and hope my company can ditch IE soon.
You can try using "prefers-color-scheme" media query for the dark theme preference. Set the :root selector to the dark color palette inside the media query. Except IE11 all browsers support it so they'll switch to dark theme if the user has set his/her preference for the dark theme. IE11 will ignore it and will use your default color palette.
You could define colors as rgb and use a utility class in the js to add the alpha. I do something like this: const rgbAddAlpha = (rgb: string, alpha: number) => { rgb = rgb.slice(rgb.indexOf("(") + 1, rgb.indexOf(")")); return `rgba(${rgb}, ${alpha})`; };
I'm going nuts with Tailwind, I love it.
Yeah me two, it’s great
Ditto!!
I was running into this just a couple days ago! What a perfect timing for this tutorial. Thank you Tailwind Labs for these videos. Please, keep coming up with high-quality materials like this.
A list of your vscode extensions would be appreciated
Agreed
Honestly +1
I believe the one that highlights the css colors is a plugin called Color Hight (naumovs.color-highlight) by Sergii Naumov
Any one know how extension to convert color Hex to RGBA and vise versa?
@@DanielDrummond2k6 hex-to-rgba by dakshmiglani
Exploring tailwind and had thoughts few days ago: "How can I use css variables for themes" And today video appeared. Magic!
Thanks TH-cam and you guys!
Awesome!
it's spooky sometimes, right 😄
I really like how flexible it is to style not only the full root document but each component individually. I already see how those variables can even be scoped inside the component itself to provide completely different styling rules for each individual component and not only colors, it basically allows for turning Tailwind into an ultimate utility-meta framework where classes become meta-information for a possible look. Requires a bit of a mental stretch in the beginning but gives ultimate powers!
Great one, would be nice to have a follow up part about the best way to add/implement dark mode to the theming
Yes!
I've been looking for this for very long. Thanks! It works amazingly with Next.js SSG
Just a little trick: instead of asking if opacityValue is undefined, you can use a nullish coalescence operator to assign a default value when it's null or undefinded. Example... ${ opacityvalue ?? 1 }
I think your method is best one for implementing dynamic theming with tailwind CSS. I have seen bunch of other approaches but by far this one is cleanest one.
I've heard this punch from many people who hate (don't know how to use) Tailwind - that it can't be used on a "themeable project", thanks for myth-busting this argument!
Fantastic demo! You could consider setting the default transparency value to 1 in function arg where you deconstruct the opacity value to avoid the if statement in the withOpacity.
The return value could be streamlined as an implicit return, but I would at least set the default @ 22:00 with ({ opacityValue = 1 }) rather than setting a guard check
I have the feeling (but I could be totally wrong) that opacityValue is not the value itself but the name of the CSS variable for the opacity (--tw-bg-opacity)
@@LorenzoLeonardini you are right, it’s an object destruction syntax { … }
«Лёгким движением руки брюки превращаются… брюки превращаются… превращаются брюки… в элегантные шорты!» 👍👍👍
Very helpful tutorial, few days ago I tried to build my app with custom theme colors, but this is more useful 🤯
Perfect tutorial and that’s what I was looking for. Out of topic, but it would be perfect to see web design tutorials from you
I would just specify colors for specific states in the theme without the hassle of support bg-opacity, etc. It may seem odd, but if the idea is to give control to the theme of defining colors, then it makes more sense that it also controls the opacity.
There are cases where you want to use a different opacity based on the contrast, as color is perceived differently based on the background and foreground contrast and the opacity will look lighter/darker depending on this. This is also why dark themes aren't simply just inverting the colors; contrast matters.
WOW 🤯 and thank you. I'm pretty new to tailwind, is the theming config especially the stuff related to opacity still relevant(I'm guessing YES, but still wanted to confirm)?
Perfect, this is exactly what I was looking for! I thought it was not possible to do themes with Tailwind.
your guys make tailwind CSS custom feature amazing!
Just a small suggestion to make check inside withOpacity more succinct, you can just check for undefined like so opacityValue ?? 1 that way if it will be undefined it will default to 1, note that I'm using nullish coalescing operator here to support 0 values. It's natively supported in Node since v.14
Can you tell me that which fonts you're using for your editor. I really love it.
Amazing video! It would really helpful if you could share a gist or repo with the code too... also would love it if you could name a few of the plugins you're using on vscode.. notably the css preview when you hover a class and the one that highlights colors with their actual color. Many thanks!!
Should my brain hurt after watching this? LOL It does.
I’m sure I’ll have to watch this series a couple of times through since my CSS skills are so-so.
But, that said, I’m very impressed so far with Tailwind’s approach. It seems now we finally have CSS that is a programming language than whatever it was previously.
Neat! Great video, it's well-explained and very easy to understand. Thanks!
I have a question: can we use any existing tailwind colors (ie, text/bg-red-500)?
Using the approach in the video, it looks like the same color may be redefined multiple times.
aka, is it possible to create something like an Alias Token?
Or is the only way to do this via the tailwind config (where we have access to the colors)?
nvm, I think I found how:
--color-fill: theme('colors.red.700');
What's the plugin you are to preview colors in css?
good question ! its in the internet.
... and that is it!! LOL Fantastic and you sometimes make me laugh a little which is a giant bonus; Tailwind really has a gem with you and the way you do these videos! How long did they look to find a coder that is ALSO great in front of a camera lol! Rock on!
Kinda feels like with naming colours you're getting back into some of the "naming is hard" territory that utilities were meant to solve for us. But I don't see any other way around it.
I'm working on my first Tailwind application at the moment which will eventually be forked off and used as the basis for many other apps. How the follow on apps get re-coloured without a massive search and replace to change a whole bunch of utilities was on my mind, so this is well timed.
Curious: is this vscode preview plugin public? Can't find it!
I can not stop watching your videos, really great!! Thanks a lot!
Great work, Thank you.
27:05 where did the fly came from :)
These videos are really excellent, awesome developer experience!
Thank you so much ❤️ for this wonderful tutorial. Would love to see more possibilities of theming. Hope we can control more looks like, border radius, background image, polygon shapes, different svg based on theme. It will bring great change in looks apart from colour alone. 👍👍 Keep rocking.
Great tutorial thank you!
Quick question: is it possible to use the default tailwind colour palette in the css variables instead of the hex/rgb hardcoded values?
In other words, something like:
-colour-primary: Colors.red.700
Instead of
-colour-primary: rgb(255,179,255)
This looks heavy and good to be done
The microphone is so big 🤣
Thanks for the content as always!
I always more appreciate good voice quality than a cam!
I am trying to implement tailwind css struggling a lot but feeling confident as well
How about adding spacing like padding to the skin? Is there any specif group name required for that skin ?
Great!
Is there any way to enable color preview using this approach?
You can still use rgb(0,0,0,1) in your css file for color preview but need to remove "rgb" and "alpha" in the "withOpacity" function
This looks amazing, but I can't seem to get it to work in a new Angular project (v11.2). Neither with CSS or SCSS. Any news on that?
did you manage to get it working? seems to work on development but not in production
Is this the theming strategy you suggest we use with the new JIT compiler in tailwindcss?
Will use this video as inspiration to theme my website soon, thanks for the great explanation and approach as always
Thanks it was really helpfull
Was trying to figure it out for a long time
Thank you from France, your video is a game changer for me :)
I implemented multiple themes on a site of mine last year. 12 themes light + dark mode. It was super simple, though I _think_ this may be even easier. Can't wait to try it out!
Note: not sure why my last comment was deleted? Due to link?
Not sure either, I did see the notification email though originally! We didn’t delete it, must be a TH-cam thing probably link related like you said 🤔
@@TailwindLabs probably. Not worried about it. Thanks for the video, the timing is perfect.
Could you please share your implementation. Would like to learn more about theming ❤️ Thanks 👍in advance
@david Parker ❤️❤️
The opacity function doesn't work in Tailwind CSS v3.0.24. However, returning `var(${variableName})` works without wrapping `rgb` or `rgba`
You make it look insanely easy. wait, maybe it is that easy!
Any reason you are using CSS Custom Properties rather than plugins that add the utilities and use theme properties with the values defined directly in the theme?
Great video, thanks! It's a little outdated I think, as you can now define hex colours inside the tailwind config `theme`, and opacity variants will work without needing to add the logic yourself.
Great stuff, a lot of useful info, thank you 😊
@18:56 Couldn't you just use Tailwind's opacity variable? Like so:
'muted': rgba( var( ---color-text-muted ), var( --tw-text-opacity, 1 ) )
Just tested and that seems to work fine! Way easier than the function.
I was wondering why he didn't just do that, but I think it's because the opacity variable is different for different properties. Right?
1. To make sure your code won't break when the variable name changes
2. To reset the opacity value. Notice the generated class adding "--tw-text-opacity: 1" above. Without resetting, any bg-opacity class in the parent would persist.
then you're locked down with the hardcoded classname --tw. what if next version they decide to use --tw4-text-opacity?
Why doesn't tailwind include classes like primary by default like other popular frameworks like bootstrap and uikit?
Would you know a problem that i have. I used tailwind cli to make a website using the stock install procedures. The website looks and functions fine in local vsc dev, but when i upload to server to the htdocs folder all the html files and the output.css, the styling isn't applied. Could you advise.
You only use textColor and backgroundColor, so I need go to each tailwind config and add those again, like "divideColor", "caretColor" etc. ???
I am thinking of using it to implement light/dark theme on user selection, so, do I have to change the wrapper class conditionally or dark:my-wrapper would work just like usual html with dark class ???
Thank you so much for this video. Learned a lot!
14:40 thats amazing!!!!!!!!!!
but what if i want to reuse colors from the palette like --accent-medium: theme('colors.pink.700'); and not hardcoding rgb values? theme('colors.pink.700') is hex value and I need to convert to rgb somewhere
Why split and convert the hex code to rgb values in your with opacity function instead of using the vscode plug-in? Javascript has parseint-function that can do this.
When it came to typography, there are some needed changes in different screen sizes, how do you define them in this method?
i have a problem ,if we set opacity-x for bg-theme-x not only bg opaicty changed even text opacity turn chnaged , what to do in this situation please guide
How would one go about setting up border colors this way?
Any reason one you couldn't/shouldn't just define the theme colors as `rgba` and use the text-opacity thing directly? So instead of `--color-fill: 185, 28, 28;` and that `withOpacity` function, just do `--color-fill: rgba(185, 28, 28, var(--tw-text-opacity));`? Not sure I understand what the `opacityValue` and helper function you made does "more", and feel like I'm missing something here. 🤔
Then if you used it for a background color it would adopt the text opacity instead of the background opacity. The variable name changes depending on how the color is used, for example:
That uses two different opacity variables, so if you bake it right into the color one of the won't work.
@@TailwindLabs Aaaah! Knew there had to be something I was missing. Thank you for quick reply!
Started using Tailwind for the first time last week on a new side-project of mine and I'm LOVING IT 💙
Tailwind is love, tailwind is life.
I completely agree with the concept, but the css-variables suck because of type safety, I wish there was a way to enforce your themes to have the same variables
So awesome 😍😍😍 simple as well with a great quality and some magic final tricks 😁👌🎉🎉
With new TS config it's problematically to implement such function like ({opacity}) => `blabla` to "colors" section
I am getting TypeScript errors for the withOpacity function that make me nuts. I had to use a return type of "any" which makes me squirm a little.
text-skin-base is confusing, sounds very close to text-base (size), what about text-skin-content ?
Kindly use latest tailwind css v3.4.*
in adding opacity to color
It's possible to do this with React Native?
Thanks for the whole Playlist ...your microphone is getting bigger with every video ;-)
Using JS functions into CSS.. so cool
Make a video on RTL with tailwind
Thank you! Could you provide the code somewhere?
When I use Vue-Cli and run a build only the :root theme is inside the generated css file, why is that?
The best tutorial ❤
At this point, TW is not adding on top of CSS, but becoming a language of its own. Something many devs won't welcome. This is an unnecessary complexity. Good for prototyping and all, but not sure if this is something I would like in my final product.
Thank you. Great tutorial
Does anyone know how to get that preview panel in VSCode I can't find one that looks that good
how about dark theme? is it just dark:theme-name?
Thank u. Wonderful explanation.
great explanation
What is your VSCode theme?
Thank you young James Hetfield!
Thanks for tips, tricks and technics
Wow
is this still the way to go? I guess since it's over a year ago, there might be a nice approach, so don't have to use this 'unsupported' rgb format . . ?
All that function nonsense is no longer needed now. You can just use hex values if you wish. Example: bg-skin-base/10 for 10% opacity on the base background color. Wonderful improvements since 2021.
Thanks for confirming that. I was just about to test the same.
I tried this and seems to still not be working. Do I need to define something in the globals.css or tailwind config?
@@MD-kb8zt I did not get around to trying this out at the time. After reading your comment this morning I went and implemented it and I can confirm that / opacities etc do not work by default with the latest version of Tailwind. @zeeeeeman can you confirm this is actually working for you? If so, would you mind sharing your configurtation?
@@kieran5746 I found a solution. Look for “Customizing Colors” in the tailwind documentation then ctrl f to find “”alpha-value” and it goes over how to define your variables to use the method listed in the original comment
@@MD-kb8zt Thank you so much for updating your comment with a solution. I am not currently at a PC but I will try this ASAP. Thanks again!
Love your videos and tailwindcss!
Best teacher ever! Thanks for this tutorial!
Thanks a lot
Thank you so much! It's so useful ❤️
About new tailwindcss/jit , i have problemes with postcss 8 in vue 3 project , how can i do please?
Try searching for a similar issue in the tailwindcss/jit github repo. If you don't find an existing issue, you can add one of your own. It could be that you are missing the NODE_ENV=development variable. Instructions for this is in the readme file in the repo.
at 22:07 (guarding against undefined) you should be able to avoid blocks entirely by using a ternary in your interpolation like so: ${ opacityValue !== undefined ? opacityValue : 1 } ... and even simpler, since opacity:0 is unlikely, like so: ${ opacityValue || 1 } (taking advantage of truthiness, even though 0 is a possible but unlikely input since it would be a strange way to specify invisibility. 🤦🏻♂️)
thanks you're solve my problem , I did not put an equal operator
Just do this: ({ opacityValue = 1 }) => { ... }, problem solved. No need for ternaries or short circuits.
Nice video, thank you.
Was wondering about how this would be done for building a light/dark theme. Thanks!
Really breaking away from IE here as it doesn't support css variables anywhere except in the root. I love this design though and hope my company can ditch IE soon.
Tailwind actually has a dark mode, check out the docs and you can implement with that
You can try using "prefers-color-scheme" media query for the dark theme preference. Set the :root selector to the dark color palette inside the media query. Except IE11 all browsers support it so they'll switch to dark theme if the user has set his/her preference for the dark theme. IE11 will ignore it and will use your default color palette.
Amazing, I love it.
Good tutorials, Thank you very much :)
a shame you have to lose the color indicator in VS Code when you change hex to just raw value.
You could define colors as rgb and use a utility class in the js to add the alpha. I do something like this:
const rgbAddAlpha = (rgb: string, alpha: number) => {
rgb = rgb.slice(rgb.indexOf("(") + 1, rgb.indexOf(")"));
return `rgba(${rgb}, ${alpha})`;
};
Thank you. Please, share the code link
This is GOLD
this video was awesome
what font that you use for your vs code font ?
looks like dank mono