Make your design themeable! Move your colors from the Tailwind config into CSS Variables and then consume those variables in the config.

Move your colors and semantic tokens in Tailwind config to CSS Variables using HSL strings to make your colors changeable at runtime.

CSS Variables

[00:00] All right there's a few moving parts and a few steps here so let's dive right in. The first thing we want to do is convert these colors that are hex colors to HSL. Like I said you could use RGB or other color formats but we're going to go with HSL here. So this is typically a task that I would use VS Code for.

[00:18] I have an extension that would go convert to HSL and that would do a pretty good job. Although I don't love that it's not rounded. I would like 173 and you can see the color remains the same. I could select the first hashtag and find all of them. And actually I'll do this batch convert to HSL.

[00:37] But just out of curiosity because here I have all the colors let me undo all of that. And let's have some fun here. I will copy this. I will go to and not chat gpd let's go with Claude for once. And I'm gonna ask my friend Claude convert these to HSL.

[00:57] I forgot the syntax highlighting but you best believe that they will know what to do. And yeah that looks pretty right. So you can see that HSL is actually kind of readable. You can see that all of these colors are on the zero hue with zero saturation. So zero saturation means gray literally like no color inside it.

[01:16] And then the first one is going to be 100% so white and the last one is 0% so black. And it goes in between. So that works. Now the next step is we actually don't want the HSL color. We want to have the HSNL strings.

[01:33] If you've read the instructions you understand that we're going to need to compose these three channels with the alpha channel. And that's going to happen below when we consume these colors here. It's a bit complicated but that's the way it works in V3. And so we can ask Claude let me zoom in a bit.

[01:50] Say give me the same object but with HSL channels only instead of the HSL color. No commas just spaces. Okay so now it's trying to be cool.

[02:09] No objects just the H. I'll give a template string SL string for H. And now that should be what we want. Exactly! Thank you so much.

[02:23] Add the percent symbol for the S and L values. I would have been faster doing it manually but we now have exactly what we want. So I can copy this. Let's not forget the most important. Thank you! You rock! There you go. Always close nicely.

[02:45] Be friendly with the robots. So now I can go and replace that here. And obviously now we don't have the color highlight because these are not colors. They are just HS and L values. But this is what we need to store in the CSS variables in the CSS.

[03:03] And then we're going to come back to the config file and compose it with the alpha value from Tailwind CSS. I know I know complicated. So step two and three happen in the CSS file. I will copy that just for reference. And actually we're going to move that over. And for now let's go in the index.css file.

[03:21] And here we're going to define these 14 colors as CSS variables in the root scope in the base layer. So at layer base and then the root scope. And here not like this but I'll comment this out.

[03:38] And I think because it's commented out GitHub Copilot is going to be able to know what we want to do and do the work for us. So you can name them whatever you want. But I like to prefix the variable name with what it is. And here it's a color. So we can go dash dash color dash teal.

[03:58] And this is exactly what I meant. Copilot sees that and is like I got you bro. You want this. You want this. Let's still make sure that it's doing the right thing. Color gray zero. Look at this. This is amazing. Tab enter. Tab enter. I am a modern developer. Tab enter. Prompt engineer.

[04:20] 19%, 9% and 0%. Does you know? Yep. It also knows to stop. This is amazing. Well there you go. Cool. So we've done that. Oh but no. It's actually it's so hard because every time you think it's doing the right thing it's actually not. It gave me the HSL colors again. I did not want this.

[04:42] I wanted the channels only. Luckily multi-cursor magic can solve that pretty quickly. Like so. But yeah it tries to be clever and say oh I know you're trying to have HSL colors. They're not really properly formatted so I'll format them for you and we did not want this. But still save some time I guess.

[05:04] So now we have our root CSS variables that are available in our CSS on the project in the browser. I can show that to you. Our UI is broken. If I scroll down a little bit we are going to find. Look at them. There they are. Color teal, purple and our grays.

[05:21] But they're not really useful because of that format but they're available. All right so next the next step is to recreate the semantic token abstractions. And so there's an example here we want to say color bg-neutral that is going to consume that CSS variable of gray zero. So let's get rid of this.

[05:40] And I will have the Tailwind config file. We want the background colors and what we want is to recreate that. And so we're still inside our base layer. Color-bg highlight and we want to. No we don't want to do that here. Thanks for trying. That's close.

[05:58] But what we want to do is go var dash dash color dash teal. And so I'm hoping that it reads this and then it knows what to do next. No it doesn't. Dash dash color bg accent var color purple. So now you know what to do. No so it's not reading across files.

[06:17] But if I had this here like so and it was commented out. Now color bg-neutral gray zero neutral dash inverted. Yes subtle and bold 80. Nice. So there you go. A little trick if you want to have copilot be more useful.

[06:38] Sometimes you need to put stuff in front of its eyes. And see if it can also do the borders. Border bold gray 60 40 20. Nice. And then text copy subtle muted and inverted. Well that was pretty useful actually. Thank you very much.

[07:01] All right so let's sum up. We have defined all the colors here in this width syntax. And then this is the equivalent of the row tokens. And then we have done our semantic tokens here. Which are mapping to the row tokens exactly like these are. And so what we need to do now is to update these.

[07:21] We are in the config file here and actually we don't need that anymore. Let me remove that. I'm going to delete that. I'm going to delete all of that. But it's freaking out because we've removed the color subject. But basically we want to update the objects below to consume the variable. And this is where we are creating the HSL color.

[07:43] We use our CSS variable with the three channels. And then we compose the slash alpha transparency with Tailwind's internal alpha value. That's a lot. That's pretty complicated. This is all going away in Tailwind v4. That's the good news. But you still need to learn how to do it. Because we're working in Tailwind 3.

[08:05] And it's a good thing to know. Let's go ahead. Let's see if it's able because of the comments to work things out. HSL. What? And then we're gonna go var dash dash color bg highlight. Yes. But instead of one here we have this. Oh and you know it needs to be a string as well.

[08:25] And here we have this alpha dash value. Okay. Can you do the same here? Nice. What about here? Color bg neutral. Yeah. Now I'm always curious if it knows that the object is going to be neutral dash inverted. It does. Look at this. Okay. Copilot. You're piloting. Subtle. Okay.

[08:45] Now I've reached the point where I'm blindly trusting it. Which is typically where problems happen. Oh what? You don't want to do it anymore. Is it because I said I trust you blindly? HSL. Please continue. There you go. Color bg. See that's the problem. It's not bg. It's border bold.

[09:04] And it's a string. What about this? Subtle and muted. Wonderful. Please do the same with text colors. Can you remember? Text copy. Yep. Yep. Yep. I say yep and I'm not even looking at the screen. I'm just tabbing away. But that looks pretty good. Inverted. Color text inverted.

[09:26] Which is color text inverted. Yeah. All right. So let's save this. And so we have our CSS file with all the CSS variable defined and mapped. And then we take this mapping and apply it to our Tailwind config file. It all looks good to me.

[09:47] But oops. Nothing is working. And oh yeah I know. I think I know why it's not working. And if we look at the root here we still only have our colors but not the semantic tokens. What I've made wrong. This is not Copilot's fault. Is I've put this outside. Let me cut it off the root scope here.

[10:06] It needs to be inside the root as well. So before that closing bracket. Like so. And this time I think that yes our colors should be back. So we have done all this and it looks like nothing has changed.

[10:21] So as a tease for the next exercises let me show you what we can do now. If I close the side panel and I open the app.tsx. You can see that we actually have moved to a demo. And the demo component is exactly the same that we had before.

[10:40] But it's moved here. And the whole reason is we can use it multiple times. And you can see here it says add a second demo. So I'll duplicate this. And so I have two of the same component on top of each other. But now I'm going to show you that we can because we have CSS variable.

[10:58] We can redefine the color of anything at any time. In the next challenges we're actually going to create a nice way to toggle different things like dark modes or different themes. But for now let me just use an inline style to show you how I can manipulate one CSS variable and change the color of the UI.

[11:17] So you can see here it suggests to create an inline style. And change the value of the color bg subtle CSS variable. So here style equals. And we're going to go redefine the dash dash color bg subtle. This could be anything here.

[11:36] The suggestion is 0 0 19 percent. It's important that it's actually using these h s and l channels. Because it's still going to compose with the semantic token and the alpha value. And all that stuff.

[11:49] And if that annoys you you can type it as react dot CSS properties. And it will be happy. So now we've redefined the color bg subtle to this almost black like dark gray value.

[12:05] And if we look at bg subtle this is what the whole wrapper is using. So now what was a light gray is now a dark gray. So it's using the same class. But we have redefined the CSS variable value under the hoods which is super cool.

[12:22] If I inspect this one you can see that it's using the color bg subtle. But then it points to that that has been defined. And if I untaggle this it goes back to the root scope. But if I refresh this is what the CSS variable is redefined to. And what wins. And that is super cool.

[12:40] And that is a great introduction to what we're going to do next. Which is implement a dark mode capability to our project.

[00:00] The main reason why we have done any of this is to be able to have themable colors or dark modes like UIs. The ability to change colors of our design tokens without to have to change the classes and have things still make sense. You can have border red 500 and then change it to blue

[00:18] then it gets really confusing but if it's called border muted it makes a lot of sense to be any color that is sort of muted. So there's a lot to unpack here but the TLDR is we're going to use CSS variables that allows us to redefine colors at runtime and it's really powerful. And to be

[00:38] able to do this in Tailwind version 3, remember we'll talk about version 4 later, but in v3 we need to convert our hex colors to HSL or RGB or any color format that supports an alpha channel for transparency. Now I don't want to get in too much details here, I recommend you reading the

[00:56] documentation below and if you're really interested in learning about CSS variables and even Tailwind plugins, I have a workshop called Multi-Theme Strategy in ProTailwind and there's a link below and you should go check that out. But for now, read the instructions and go on with the exercise. It's

[01:13] a bit of a long one but there's all the information you need to succeed. I'll see you on the other end, good luck!

Semantic, themable color design tokens in Tailwind CSS

In this workshop, we're going to define semantic color tokens in Tailwind CSS,
to adhere to a convention set in a Figma design File.

We'll cover both Tailwind CSS v3 and v4 approaches 🔥

## What to expect:

**Figma to Tailwind CSS:** Convert a Figma design to a Tailwind CSS project.

**Color Design Tokens:** Implement custom colors in your Tailwind CSS project,
starting with raw colors and adding a layer of abstraction for semantic color
tokens.

**Semantic Design Tokens:** Lock down color usage to specific scenarios.

**CSS Variables:** Leverage CSS variables to make your color tokens themable.

**Tailwind CSS v4:** Prepare for the future by porting your work to the Tailwind
v4 CSS-first theme configuration.

Tailwind CSS Color Tokens

Simon Vrachliotis

Learn about the role that semantic design tokens play in mature design systems.

Introduction to Tailwind CSS Color Tokens

Introduction

In this exercise, you'll recreate a design from Figma using Tailwind. 

Intro

Recreate a design in Figma using Tailwind as precisely as possible on both mobile and desktop.

Use Tailwind with CSS Grid classes to re-create a design from Figma pixel by pixel.

Design Implementation

Figma to Tailwind CSS

Implement custom colors from a Figma design into a Tailwind project. Starting with the raw colors first and then an abstraction for semantic color tokens.

Extend your Tailwind theme with the 14 raw colors from the Figma design and update the UI to use them.

Extend your Tailwind theme with color tokens and then style your app based on the colors from a Figma design using them.

Custom colors in UI

Cutoff Tailwind's default colors by defining all of the colors directly in theme.colors and override everything else.

Cutoff Default Colors

Overriding Tailwind's color classes got rid of the "non-colors" such as -inherit, -current, and -transparent. Let's add them back!

Add Tailwind's non-colors back by simply adding them to theme.colors before the custom colors.

"Non colors" support

Having all of your color tokens available globally can lead to design problems. Instead, scope your colors to specific use-cases such as background or text.

Create a bespoke design system in Tailwind by extending the Tailwind theme with semantic design tokens for different contexts.

Semantic Design Tokens

When overriding colors it's easy to wipe out most of Tailwind's core color plugins. Your challenge is to extend your theme with a few missing plugins.

Abstract your semantic design tokens into constants and then reference them in theme.extend for the various core color plugins in Tailwind.

Broader Scopes

Support enabling dark mode support in your tailwind project with just a single class.

Tailwind CSS Color Tokens

Tailwind CSS Color Tokens

Transcript

CSS Variables

Transcript