Exploring tailwind and had thoughts few days ago: "How can I use css variables for themes" And today video appeared. Magic! Thanks UA-cam and you guys! Awesome!
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.
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!
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.
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.
... 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!
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.
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!!
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.
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)?
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)?
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)
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.
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.
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
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
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.
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.
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 ???
@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.
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?
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
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
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?
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 . . ?
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. 🤦🏻♂️)
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 💙
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.
I'm going nuts with Tailwind, I love it.
Yeah me two, it’s great
Ditto!!
Exploring tailwind and had thoughts few days ago: "How can I use css variables for themes" And today video appeared. Magic!
Thanks UA-cam and you guys!
Awesome!
it's spooky sometimes, right 😄
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.
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!
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!
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
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.
«Лёгким движением руки брюки превращаются… брюки превращаются… превращаются брюки… в элегантные шорты!» 👍👍👍
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 { … }
Great one, would be nice to have a follow up part about the best way to add/implement dark mode to the theming
Yes!
Very helpful tutorial, few days ago I tried to build my app with custom theme colors, but this is more useful 🤯
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.
your guys make tailwind CSS custom feature amazing!
Perfect, this is exactly what I was looking for! I thought it was not possible to do themes with Tailwind.
... 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!
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
These videos are really excellent, awesome developer experience!
I can not stop watching your videos, really great!! Thanks a lot!
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.
Thank you from France, your video is a game changer for me :)
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!!
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.
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)?
You make it look insanely easy. wait, maybe it is that easy!
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
Best teacher ever! Thanks for this tutorial!
What's the plugin you are to preview colors in css?
good question ! its in the internet.
This looks heavy and good to be done
Can you tell me that which fonts you're using for your editor. I really love it.
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');
Curious: is this vscode preview plugin public? Can't find it!
The opacity function doesn't work in Tailwind CSS v3.0.24. However, returning `var(${variableName})` works without wrapping `rgb` or `rgba`
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)
The microphone is so big 🤣
Thanks for the content as always!
I always more appreciate good voice quality than a cam!
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.
Is this the theming strategy you suggest we use with the new JIT compiler in tailwindcss?
How about adding spacing like padding to the skin? Is there any specif group name required for that skin ?
i'm quite new to tailwind. Using the withOpacity utility function on typescript doesn't work. How can we implement such utility function for ts?
Great work, Thank you.
27:05 where did the fly came from :)
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.
Great stuff, a lot of useful info, thank you 😊
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 doesn't tailwind include classes like primary by default like other popular frameworks like bootstrap and uikit?
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
Thank you so much for this video. Learned a lot!
I am trying to implement tailwind css struggling a lot but feeling confident as well
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
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.
You only use textColor and backgroundColor, so I need go to each tailwind config and add those again, like "divideColor", "caretColor" etc. ???
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.
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 ???
@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?
Tailwind is love, tailwind is life.
So awesome 😍😍😍 simple as well with a great quality and some magic final tricks 😁👌🎉🎉
How would one go about setting up border colors this way?
When it came to typography, there are some needed changes in different screen sizes, how do you define them in this method?
When I use Vue-Cli and run a build only the :root theme is inside the generated css file, why is that?
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?
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!
Using JS functions into CSS.. so cool
The best tutorial ❤
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
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.
Does anyone know how to get that preview panel in VSCode I can't find one that looks that good
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 UA-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 ❤️❤️
Thank you young James Hetfield!
Make a video on RTL with tailwind
Kindly use latest tailwind css v3.4.*
in adding opacity to color
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.
text-skin-base is confusing, sounds very close to text-base (size), what about text-skin-content ?
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 . . ?
how about dark theme? is it just dark:theme-name?
Thank you! Could you provide the code somewhere?
It's possible to do this with React Native?
Love your videos and tailwindcss!
Thank you. Please, share the code link
14:40 thats amazing!!!!!!!!!!
Thanks for the whole Playlist ...your microphone is getting bigger with every video ;-)
What is your VSCode theme?
this video was awesome
Thank you. Great tutorial
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.
Thank you so much! It's so useful ❤️
Thanks for tips, tricks and technics
Wow
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.
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 💙
great explanation
Thank u. Wonderful explanation.
Superb content. 👏👏👏
Any chance you could share the code on play.tailwind?
Good tutorials, Thank you very much :)
Wow! That is the business!
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.
This is GOLD
I can't find "skin" documentation on tailwindcss website? anyone?
skin is an arbirary but sematic color name added to the config . it coud be named anything ;-) and would work the same