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

[00:00] All right, so this is our starting point. If you watch the video from the previous exercise, it doesn't look quite the same. But remember, we said we would start with a grayscale. So this is what we have right now. The rest of the UI is perfectly like it should, but grayscale sort of. And what we want to do is bring the raw colors from the color palette here,

[00:19] these 14 colors into our Tailwind theme, and then we can update the UI to use these colors. So I'm in the Tailwind config file here, and I will extend the colors object, and we're going to port over all the colors. So I'm going to open the variables panel, and we're going to focus on the actual colors.

[00:39] And so we have teal, purple, and then a bunch of grays. So let's start with teal. I'll copy this hex color here. So teal is going to be that one. And you can see my colorize extension at work, which highlights the color, which is pretty nice. And we're going to do purple as well, like so. Now for the grays, I could go gray zero,

[00:59] gray five, gray 10, but we can also compose these names by doing gray as an object. And inside we can have zero with a value, and then five with a value. And Tailwind is going to kebab case gray dash zero, gray dash five, et cetera,

[01:17] to make the class names that we want. So gray zero is FFFFF, and then gray five is EBEBEB, FFFFF, EBEBEB, and then we have 10. I will do one more. So 10 is DADADA. And then you get the idea. So I will fast forward the video to the point where I have all colors added. And here we go.

[01:36] So we have all our colors added. These are the row color tokens, and we're going to update our UI to match the design with the actual colors this time. So in app.tsx, you can see we have a comment here about replacing the colors with the actual colors. And there's a little eye emoji next to every element

[01:54] where there's a color to change. So I'll remove the top comment. And the very first div here, we want to, if I pull the design, have this background color here. And this color is background subtle, and it's going to help to open the tokens variable here. So background subtle is actually gray five.

[02:14] So here I'll go BG gray five, and I'll also add the min height screen just so the background color expands to the whole height. There we go. Can remove the little eyes. The next one here is the actual card. When we built it together on the video,

[02:32] I mean, we had a BG white to make it look like so. But here we want to try to use the actual color tokens that we have expanded. And we do have white, but it's under the gray zero namespace. And that's important because right now we're extending the colors, but we are going to aggressively override

[02:52] the whole colors object later. So we don't want to use white because white is going to go away. So here border black. Black is gray 100. So border gray. And you can see the scale here, 100. And BG is going to be gray with an E of zero. And I just realized that I'm doing something silly here.

[03:10] I just copied the wrong color, which was black. Let's look at the design and actually work out. The background is white. If we were to look at the color, it is the FFFFF, full white. But if we look at the border here, it's border muted. And the actual color is C2, C2, C2.

[03:29] We can work out that this is gray 20. Or we could look in the variables panel. Border muted is gray 20. So we're going to change the gray 100 here to 20. And that looks pretty nice. All right, next up is, I guess, this bit of text. And let me zoom in a bit, the UI.

[03:48] So remove the eyes here. And then the next set of eyes, you know what? It should actually be up here. Fixing it live, my friends. Yeah, the paragraph tag here, the color is definitely not black, but it is text muted. And text muted is gray 40.

[04:06] So we're going to go here, text gray 40. Yep. And then move on to the H2. The H2 is text copy, which is gray 100 or pure black. So we can add here text gray 100. Remove the eyes. We're making good progress.

[04:25] And the paragraph tag next down here is text subtle. And text subtle is gray 60. Fine, we're going to go text gray 60. You can see our card is looking pretty good. The button is probably coming next. Go down here. And indeed, the button has a BG of black and text of white.

[04:45] But instead, we want a background of bold. Background bold is equivalent to 80. And the text is inverted, which I believe is just white. Text inverted. Oh, gray five. Okay, so gray 80 for the background and gray five for the foreground.

[05:03] BG gray 80. And text gray five should do us. And it's not showed here, but let's go with the hover like we had before. We had made something where it goes black on hover. So hover BG gray 100.

[05:21] It's a nice little touch with the hover effect. Good stuff. So I think we're done with the card and then we can move on to the two little other sections. This is the parent grid container of both. And this is the first card, which is going to be using the teal color. And you know what? Let's go look at this one just for some change.

[05:41] So the background here is the background highlight. This one is pretty safe bet that it's going to be the teal color. And then the other one is the accent, which is purple. So where are we here? Instead of BG gray 100, we're gonna go with BG teal. I love that swatch. It looks really good.

[06:00] And the other one is going to be BG purple. Nice. And the text is probably the last thing that we need to take care of. For this one, the text is copy, which is 100% black. And the other one is inverted, which is gray five. So gray five, gray 100.

[06:19] And I believe the other ones are the same. Yep. But remember with 60% opacity. Actually, this one has 70% and this one is 60%. And I think it's intentional because of the background color. So gray 100, gray five, and then 60%, 70%.

[06:38] So here we have text black and text black. We could put the color on the parent, but that also works here. It's just two times. I don't think it's a big deal. So instead of text black, we want text gray 100. And yeah, we'll keep the 60% and text gray 100. And for the other one, scroll down a bit.

[06:58] We want text white, which is, well, inverted, which is gray five, 60%. Remember it was 70. Let's try 60. It should probably work as well. Text gray five. And now remove the little eyes. And with that, this is our markup.

[07:20] And this is our UI. And it looks, yeah, you know, I kind of understand why 70%, well, it feels like it's slightly less contrasty. So maybe let's try here to go 70%. And yeah, that works better. And with that, we are done with this exercise.

[07:39] We have brought all the custom colors to our UI, and our entire UI is built up with these custom colors. Good job.

[00:00] To start things off, you're going to port the 14 raw color tokens from Figma, so the color palette here, you can see there's steel, purple, and then 12 grays. You're going to extend the Tailwind theme with those, and then you're going to update the UI

[00:16] to use these colors instead of the placeholder random colors that we've used up to this point.

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.

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

Custom colors in UI

Transcript