00:00 All right, our application is working, but as you can see, there is no colors because of the way the theme configuration has changed, and we need to go and fix that. This can all happen in the CSS file now inside the new add theme block. Right now, we have the base layer with root scope definitions for our hard-coded

00:18 or like raw color tokens. And then we have our semantic tokens here. And these are the ones that we want to define for our theme. Remember, just like we were doing in the Tailwind config, and so here we're going to move these inside this add theme block, and it has to be outside of the base layer.

00:36 So I will copy all of these declarations. Actually, I will cut them. We're going to break things, but then fix them again. And let's go right at the top here, and I will open a new add theme block. So I'll paste the variables in here, but there is a specific naming convention to follow to make things work.

00:55 And the best way right now to find out about this convention is to look for Tailwind CSS V4, which will take you to the blog post that the team has written. And somewhere there, there is a link to the theme. Let me zoom in a bit. Right there, explore the default theme, and you will see the name.

01:15 Whoa, this is very small, of all the CSS variables. So you can see the colors are color dash, the name of the color, and then something like spacing or width or font size. And you can see how everything is kind of namespaced. And so you can take inspiration there

01:33 and then go bring this to your theme block. The namespace for the background color is actually dash dash background dash color. So I can select all the color BG, and I will select these. And make a note now that we are changing the name of these variables in the theme block.

01:50 So we also need to change the name of the variables when we redefine them for things like dark modes or the citrus theme. So I will continue searching for different color BG namespaces. That's it, I've got all of them in my clipboard, multi-cursoring. So I will remove the BG, and I will move before the color

02:10 and go background dash color. I'll do the same for the border. I will select all the color dash border namespaced CSS variables and invert the order. So inverse the order, sorry. So border dash color is the right namespace.

02:27 And finally, for the color text, once again, select everything also outside of this theme block and change to text dash color. So we now have a valid theme customization, but nothing is going to work just yet because we are still consuming colors

02:46 that are not real HSL colors. Remember, we have defined the HS and L channels, but not the color. So we need to go and update these before it works. But let me show you, as you can see, still no colors in the UI, but if we look for our root scope,

03:04 which is actually now the theme layer, you can see there is this base layer, but we also are going to find a theme layer. There it is, which is set before. You can see that Tailwind version 4 has four layers, the theme, which is the deepest nested layer, and then base component and utilities.

03:23 So in that theme layer, we are going to be able to see our custom colors, I believe. And this is a good moment to realize that we have not erased or overridden all the colors of Tailwind. So we have all the default colors. So that's something we need to fix. So if I keep scrolling, actually, you know what?

03:43 I will show you how to cancel out these. And what I mean here is the equivalent of, instead of extending, writing directly in colors to override everything. And the way you can do this in the new theme block is target the colors object or core plugin.

04:01 And this one is dash dash color dash the name of any color. And we're going to select literally all the colors with a star, and then set that to initial. And this is basically going to wipe everything, start from scratch. And so then we're going to define our colors here. And this will be the only colors available.

04:19 So if we once again, look for our theme layer right there, we should see that there are much less colors now, shadows, et cetera. And let's go find the colors. And we should only have the colors that we've defined. Obviously they come after everything. And there they are. You can see that right now,

04:38 we've defined the background colors, border colors, and text colors. But like I mentioned, if we check color purple, this is only the channels and not the actual HSL color, which is why it's not working. So let's keep progressing. And hopefully we can bring back all the colors like they were before, but in version four.

04:57 So we've done step one A, which is move the colors in the theme block. And further below, there is also a one B. Actually we've done the one B, which is create the theme block to host the semantic colors. But we had done that at the top of the file.

05:16 So the next step is to now rename also the dark colors, but we've actually done that because I've selected the multi-cursor. So we have background color, border color, and text color, which are the correct namespace. And the same for our dark modes and citrus theme.

05:36 So what we really need to do here is the last step is to, let me delete that, change the colors to be the true HSL color instead of the layers. And I'm going to do this progressively just to show you that this indeed

05:54 going to bring back support for the colors. So worth noting, we're going to change this in the next exercise, but right now we still declare the raw color tokens as the root scope in the base layer. We don't need to do this, but we're going to go incrementally step-by-step. So look at this. We are going to turn this into HSL, HSL,

06:14 parentheses and add, oh, we don't even need the commas. We just close the parent here. And if I go back to my UI, you can see that now the teal color is working. It is only working once because we are then redefining it for dark mode and for the citrus theme.

06:33 And when we redefine it, you guessed it, we are doing so with the HS and L segments instead of the HSL color. And I find pretty cool that you can see now this color here showing up where all the others are not working. So let's do one more, HSL, and you get the idea. Now these two are working.

06:51 And let me show you that we can update the dark ones by simply going into the dark here and also turning these into HSL colors. So now we're going to have light and dark, but obviously the citrus are still not working for the exact same reason. And the reason is right there,

07:08 they are defined without the HSL color. So I'm going to do all of the remaining ones together, or maybe not all, but I'll go with all of these, HSL, and I'm going to make sure that everything else is covered. So we've got these four left to go, HSL.

07:26 And now I am hoping that we have all of the functionality back. Light, dark, works nicely. And then light citrus, dark citrus. And you can see that all the colors here are defined as HSL colors, and therefore everything is working.

07:46 We're going to improve things in the next and final step, but this is already a fully functioning Tailwind CSS version 4 implementation. Now you will see in the next step that we can greatly simplify a lot of things.