Theme Configuration in CSS

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

[00:00] For this exercise, the project is already set up with Tailwind CSS version four. We've upgraded Tailwind CSS to version four alpha, and we've installed the Tailwind Vite plugin. In the Vite config, we have imported that Vite plugin, and we have registered it here in the plugins array. We've also replaced the three Tailwind directives

[00:17] at Tailwind base components and utilities with at import Tailwind CSS. And finally, we've deleted the PostCSS config file because we don't need it anymore using the Vite plugin, and we could have deleted the Tailwind config, but we keep it just as a reference of what we've been working on. In this first exercise,

[00:35] you're going to use the new at theme block to register the custom colors in the Tailwind theme. You're going to have to move things around and rename the variables, and also go back to the HSL color value instead of the HS and L strings. There's all the information that you need in the description below. 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

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

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

Tailwind CSS Color Tokens

Tailwind CSS Color Tokens

Transcript

Theme Configuration in CSS

Transcript