Theming Tailwind with CSS Variables

[@jslbrt]

I'm going nuts with Tailwind, I love it.

[@TheRafark]

Yeah me two, it’s great

[@Allformyequine]

Ditto!!

[@Andrey-il8rh]

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!

[@rfmiotto]

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.

[@Сергей-й9т7ъ]

Exploring tailwind and had thoughts few days ago: "How can I use css variables for themes" And today video appeared. Magic! Thanks KZbin and you guys! Awesome!

[@protocode_227]

it's spooky sometimes, right 😄

[@Andrey-il8rh]

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!

[@elie1400]

A list of your vscode extensions would be appreciated

[@DaniloMarquesdeRezende]

Agreed

[@eYinka]

Honestly +1

[@corey5974]

I believe the one that highlights the css colors is a plugin called Color Hight (naumovs.color-highlight) by Sergii Naumov

[@DanielDrummond2k6]

Any one know how extension to convert color Hex to RGBA and vise versa?

[@elie1400]

@@DanielDrummond2k6 hex-to-rgba by dakshmiglani

[@_CazaBobos]

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 }

[@wolfphantom]

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

[@LorenzoLeonardini]

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)

[@yakovlev_io]

@@LorenzoLeonardini you are right, it’s an object destruction syntax { … }

[@yashkhd1100]

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.

[@faraonch]

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.

[@oliverp8006]

Great one, would be nice to have a follow up part about the best way to add/implement dark mode to the theming

[@hoagy_ytfc]

Yes!

[@addd3231]

Very helpful tutorial, few days ago I tried to build my app with custom theme colors, but this is more useful 🤯

[@friemae]

These videos are really excellent, awesome developer experience!

[@ulvidamirli2758]

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

[@Allformyequine]

... 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!

[@QueeeeenZ]

Perfect, this is exactly what I was looking for! I thought it was not possible to do themes with Tailwind.

[@benthomson2406]

your guys make tailwind CSS custom feature amazing!

[@aleksandervitalevich1299]

«Лёгким движением руки брюки превращаются… брюки превращаются… превращаются брюки… в элегантные шорты!» 👍👍👍

[@dealloc]

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.

[@weblearningd2294]

I can not stop watching your videos, really great!! Thanks a lot!

[@markconger8049]

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.

[@alfaphil]

Thank you from France, your video is a game changer for me :)

[@lightningspeed6466]

Thanks it was really helpfull Was trying to figure it out for a long time

[@zeroows]

Great work, Thank you. 27:05 where did the fly came from :)

[@Andrey-il8rh]

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

[@rijkvanwel]

@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.

[@Mike-lu1pt]

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?

[@daffamumtaz2361]

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.

[@reapi_com]

then you're locked down with the hardcoded classname --tw. what if next version they decide to use --tw4-text-opacity?

[@akamfoad]

Will use this video as inspiration to theme my website soon, thanks for the great explanation and approach as always

[@JimOHalloran]

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.

[@vesper8]

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!!

[@SusanthCom]

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.

[@parenteseswebdev]

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.

[@TobiasSailer]

Curious: is this vscode preview plugin public? Can't find it!

[@MikeStratton]

You make it look insanely easy. wait, maybe it is that easy!

[@tonyemmanuel8045]

How about adding spacing like padding to the skin? Is there any specif group name required for that skin ?

[@ryanross7191]

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. 🤦🏻‍♂️)

[@nasim6778]

thanks you're solve my problem , I did not put an equal operator

[@dealloc]

Just do this: ({ opacityValue = 1 }) => { ... }, problem solved. No need for ternaries or short circuits.

[@jimmyj.6792]

So awesome 😍😍😍 simple as well with a great quality and some magic final tricks 😁👌🎉🎉

[@palyanytsia]

What's the plugin you are to preview colors in css?

[@tilakmadichettitheappdeveloper]

good question ! its in the internet.

[@raymondmichael4987]

This looks heavy and good to be done

[@subhashmalireddy]

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)?

[@adrian1358]

Great stuff, a lot of useful info, thank you 😊

[@thomassaw]

Thank you so much for this video. Learned a lot!

[@adamtak3128]

Is this the theming strategy you suggest we use with the new JIT compiler in tailwindcss?

[@devhamdani]

Can you tell me that which fonts you're using for your editor. I really love it.

[@techie607]

I am trying to implement tailwind css struggling a lot but feeling confident as well

[@razafindrakotojosephin6151]

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?

[@VincentCordel]

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)

[@myxsys]

The opacity function doesn't work in Tailwind CSS v3.0.24. However, returning `var(${variableName})` works without wrapping `rgb` or `rgba`

[@harrygreen1465]

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.

[@markokraljevic1590]

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

[@neelabhdutta6691]

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 ???

[@jnetto]

Best teacher ever! Thanks for this tutorial!

[@codementor3974]

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

[@joeregan.]

Why doesn't tailwind include classes like primary by default like other popular frameworks like bootstrap and uikit?

[@iamdavidwparker]

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?

[@TailwindLabs]

Not sure either, I did see the notification email though originally! We didn’t delete it, must be a KZbin thing probably link related like you said 🤔

[@iamdavidwparker]

@@TailwindLabs probably. Not worried about it. Thanks for the video, the timing is perfect.

[@SusanthCom]

Could you please share your implementation. Would like to learn more about theming ❤️ Thanks 👍in advance

[@SusanthCom]

@david Parker ❤️❤️

[@divdax4286]

Love your videos and tailwindcss!

[@valtism]

The microphone is so big 🤣 Thanks for the content as always!

[@sanctipaprichio]

I always more appreciate good voice quality than a cam!

[@dorshiff]

When it came to typography, there are some needed changes in different screen sizes, how do you define them in this method?

[@JohnSmith-zl8rz]

You only use textColor and backgroundColor, so I need go to each tailwind config and add those again, like "divideColor", "caretColor" etc. ???

[@lenartpapez2512]

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?

[@g-luu]

did you manage to get it working? seems to work on development but not in production

[@Katre-]

How use color from tailwind.config.js ? With theme() function ?

[@zeeeeeman]

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.

[@kieran5746]

Thanks for confirming that. I was just about to test the same.

[@MD-kb8zt]

I tried this and seems to still not be working. Do I need to define something in the globals.css or tailwind config?

[@kieran5746]

@@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?

[@MD-kb8zt]

@@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

[@kieran5746]

@@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!

[@Diamonddrake]

Tailwind is love, tailwind is life.

[@lcapocer]

When I use Vue-Cli and run a build only the :root theme is inside the generated css file, why is that?

[@magnusandersson2495]

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.

[@chaes1161]

Great! Is there any way to enable color preview using this approach?

[@huannguyen6559]

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

[@brianzitzow4411]

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?

[@visheshmp]

14:40 thats amazing!!!!!!!!!!

[@jasarwadlow9406]

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)?

[@jasarwadlow9406]

nvm, I think I found how: --color-fill: theme('colors.red.700');

[@chethannp5981]

The best tutorial ❤

[@ahmedosama7632]

Make a video on RTL with tailwind

[@CodeFusionDev]

Kindly use latest tailwind css v3.4.* in adding opacity to color

[@VuNguyen-yj5wi]

Thank you so much! It's so useful ❤️

[@helloiamjoshie]

How would one go about setting up border colors this way?

[@JohnSmith-zl8rz]

text-skin-base is confusing, sounds very close to text-base (size), what about text-skin-content ?

[@JustinByrne1337]

Does anyone know how to get that preview panel in VSCode I can't find one that looks that good

[@QWERTY-mh2hb]

It's possible to do this with React Native?

[@FauzulChowdhury]

Superb content. 👏👏👏

[@kohelet910]

Using JS functions into CSS.. so cool

[@Levyndra]

With new TS config it's problematically to implement such function like ({opacity}) => `blabla` to "colors" section

[@nmastroianni]

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.

[@eidiazcas]

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

[@ShinjaeKang]

Good tutorials, Thank you very much :)

[@ray-lee]

how about dark theme? is it just dark:theme-name?

[@mkroven]

Thank u. Wonderful explanation.

[@Svish_]

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. 🤔

[@TailwindLabs]

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.

[@Svish_]

@@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 💙

[@rodrigorios78]

I like how his accent is easily understandable... cool feature btw!

[@pipe_runner_lab]

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.

[@ulrichmbouna4091]

About new tailwindcss/jit , i have problemes with postcss 8 in vue 3 project , how can i do please?

[@macbruker]

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.

[@hcsftw]

Thank you! Could you provide the code somewhere?

[@benjaminmaywald660]

Thanks for the whole Playlist ...your microphone is getting bigger with every video ;-)

[@bryanprimus]

what font that you use for your vs code font ?

[@josephocampo4968]

looks like dank mono

[@protocode_227]

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 . . ?

[@MrTrickydisco]

Any chance you could share the code on play.tailwind?

[@electrotsmishar]

Thank you. Great tutorial

[@agnemedia624]

Thanks for tips, tricks and technics Wow

[@sushardianto8039]

Thank you. Please, share the code link

[@lucioeiras]

What is your VSCode theme?

[@evanfuture]

Amazing, I love it.

[@bluemelon-io]

What a masterpiece!

[@CorporalPoon]

a shame you have to lose the color indicator in VS Code when you change hex to just raw value.

[@TheWebIsYourFriend]

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})`; };

[@cintron3d]

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.

[@JustinByrne1337]

Tailwind actually has a dark mode, check out the docs and you can implement with that

[@ManadayMavani]

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.