Theming Tailwind with CSS Variables 

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'm going nuts with Tailwind, I love it.

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

These videos are really excellent, awesome developer experience!

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

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

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!

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 can not stop watching your videos, really great!! Thanks a lot!

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

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

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.

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.

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

A list of your vscode extensions would be appreciated

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

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

This looks heavy and good to be done

Really like this series

Love your videos and tailwindcss!

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!

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

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

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

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

Thank u. Wonderful explanation.

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

Thank you. Great tutorial

Best teacher ever! Thanks for this tutorial!

Good tutorials, Thank you very much :)

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

The best tutorial ❤

Superb content. 👏👏👏

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

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.

this video was awesome

Amazing, I love it.

Nice video, thank you.

Thanks for tips, tricks and technics Wow

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.

What a masterpiece!

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

Curious: is this vscode preview plugin public? Can't find 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!!

Great video!

thiank u.. i am happy with this video.

great explanation

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

This is super cool.

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

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

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

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

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 opacity function doesn't work in Tailwind CSS v3.0.24. However, returning `var(${variableName})` works without wrapping `rgb` or `rgba`

This is GOLD

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

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

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

Wow! That is the business!

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.

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

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

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.

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

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

Tailwind is love, tailwind is life.

Using JS functions into CSS.. so cool

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?

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

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

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?

Thanks a lot

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

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

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! Could you provide the code somewhere?

Usefull Thanks

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?

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

So good

Awesome.

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

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

What is your VSCode theme?

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

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

Make a video on RTL with tailwind

Thank you. Please, share the code link

It's possible to do this with React Native?

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

Genius :-)

First comment! 🥳 Thanks for this video 🙏🏾

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

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

what font that you use for your vs code font ?

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