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

[00:00] Let's do this. So we are going to build both the mobile and desktop version and I will start with the mobile I tend to like to do this Build the first version for the mobile and then look at what changes as you grow up in size in viewport sizes

[00:15] Our starting point is pretty minimal at this point. This is literally all we've got a paragraph tag That says build the Figma design here. Here's the file we're going to work on so I'm going to remove the paragraph tag and the comment and I will keep the wrapping div that we're going to use as

[00:32] Our container. So if I go and inspect the outermost Elements, you can see that we have this 24 padding top and bottom Which I think we should take care of so the first wrapping element is going to have a py padding vertical of

[00:52] 6 level 6 is 24 pixels. So I'll add here a class and we're using react So we're gonna use class name and I'll go py-6 and let's also give a light gray again We're not going to use the exact colors. But for this wrapping div, I'll go BG gray 100

[01:09] So now you can see this band at the top that is having the padding and next the next section Inside that is another wrapper that has padding of 24 all around So this is now the card wrapper. So inside of there. I'll have another div that has

[01:27] p-6 which is 24 pixels all around and then let's start placing our HTML elements and then we're gonna go about styling but now we have the two wrapping divs and then we're going to have a first card here that has

[01:43] Eyebrow heading paragraph button and then we have two call to action or highlight cards So let's do the first one the first card So it's going to be a div to wrap it all and then paragraph heading one Paragraph that could be part of the heading one and be like in a span style

[02:00] but I'll use a p tag and then h1 here and p tag here too and then a anchor tag for the button so a div to contain this a paragraph that says special deal the heading one tag said opportunity of a

[02:19] lifetime and then we have a paragraph with some lorem ipsum and Finally, we have an anchor tag. Let's send it nowhere and it says learn more So this is what we got so far Let's maybe just give it a white background and a border and some padding just so we can differentiate it mentally

[02:41] So Class name BG white I'm also going to give it a padding of six and let's go with the border. Let's make the border black Remember, we don't care about the colors. And there we go We get the scaffolding or skeleton of our first card next we're going to have these two other cards

[03:03] If I look at the desktop they go side by side So we probably want to wrap these two in a container a parent that's going to be a grid One column and then switch to two columns. So this is our first card I will collapse this and then next we're going to have a

[03:21] Let's actually go grid and then we're going to have two cards The first one is roughly teal 400 and this one is like purple 500. I don't know. Let's try that BG teal Yeah 300 seemed pretty right and we're gonna have to have a big padding p10 here and we're going to have two bits of text because

[03:42] They'll be styled differently could use a paragraph or span Let's go with span here. And the first one says conversion rate and then ninety eight point six percent conversion rate and then the second span says ninety eight point six percent and then I'll Duplicate this and make another card. This one is going to be Purple

[04:04] 400 and it's going to say customers 1 million plus wouldn't that be nice? customers 1m Plus and we're done. No, I'm kidding This is looking terrible, but we have the structure in place and we can keep going

[04:20] So the next thing I want to do is add the spacing between these elements and also not let the thing spread all The width of the viewport but work out what the max width container should be on the mobile design here It's going side to side with the we've seen 24 pixel spacing But maybe looking at the other

[04:42] Desktop size we can work out. What is the max width container? You can see that frame here. This looks intentional and it has a width of 896 pixels so it looks to me like there is the main Wrapper which is oh you can see here

[05:01] It has 24 pixels of vertical padding and then it switches here to 48 So we'll have to change that but then we have this inner wrapper that has 32 instead of 24 at the mobile breakpoint But it also has this max width container seemingly of 896

[05:18] So we're gonna get the inspiration from the desktop even if we work on the mobile first and so it is the inner Wrapper this one. So we're going to give it a max width of and let's see if with a bit of luck 5xl that's too much

[05:36] 4xl maybe a look at this 4xl is exactly the 896 targets that we are going for nicely done complete luck This is going to send it to the left and we can center it with MX auto like so

[05:55] All right, and because we have the external padding when the viewport gets smaller it's going to compress it to keep the 24 pixels on the side and 24 plus 24 top and bottom we are looking pretty good. Okay, so we have our outside spacing, right?

[06:13] Now we need to bring this 32 and 32 and you know what this could be a grid Stacked with a gap of 32, but then this is going to change. I mean we can still have a grid There's actually more than one way you can build this you could have margin top on both here

[06:31] Actually, you know what this might not be how the solution is set up But I'm going to use grid here because I feel like it right now So this is going to be a grid of one column and this is going to stay a grid of one column But then we're going to have an inner grid with two columns, which is completely fine So on the wrapper thing where we just added the max width

[06:51] I will also add a class of grid just so it stacks This is not going to change anything But now I can add my gap of 8 which is 32 pixels and I just realized we don't have the 3 at the top level We're going to have this one here, which is the card and then we have this wrapper

[07:09] So we only with that grid going to handle that middle gap here So this is not going to create the other gap and as you can see our grid has the first element and then the second Which is both these things So now we have the right spacing here and now we can manage the gap between these two

[07:26] So here where we have grid also gap 8 and we now have the correct spacing that we want and you know what just for fun And because this really annoys me the way it's elongated here I'm going to do the two column grid and so because here it says from the SM breakpoint

[07:43] It's pretty safe to assume that the switch to two columns happen from the SM breakpoint So I have grid and then I will go SM grid calls to so we have two columns from the small breakpoint and up So SM grid calls to and we want them to be equal one fraction unit each

[08:01] So this is perfect. And would you look at this? This is now two columns and then one column Very cool. All right at this point it still looks terrible. So now that we have the main structure in place Let's go and make it look as good and as close as we can

[08:20] colors aside and we'll start right at the top the first element it has a border radius of four pixel and a padding of 24 everywhere and I think that's what I had said. So border radius of four pixel So this is our card wrapper here and I will go with

[08:40] Rounded and what is four pixels? Of course, it's nothing because we have two and six So we're gonna go with an arbitrary value of four pixels All right. So now let's take care of the text bits. First one is specialty So this is where we're going to pay high attention we have a font weight of

[09:01] 700 font size of 12 line height of 16 and a later spacing of 2% so I'll untaggle this and here font bold. I think 700. Yep text extra small which is 12 pixels and I believe 16

[09:20] So we actually good here and let's give it a random color of text gray. We go with 500 maybe even 400 and The next thing that's missing is this needs to be uppercase and a little bit of letter spacing uppercase and then tracking wider

[09:40] Yeah, that looks pretty good. What is actually 2% the absolute correct value here would be 0.02 M and yeah, that looks pretty spot-on to me next up we have

[09:55] first of all a little gap of 4 here and then we have opportunity of a lifetime which is bold again 24 pixel and 32. So the gap of 4 is actually gonna be empty 1 and then 724 32 so for the h1 I'm gonna go class name

[10:14] Empty 1 and then font bold and text when it's 24 So text to Excel is 24 and if it's 32, we are bueno. Bueno. Very cool Next we have the paragraph. There is a generous

[10:31] Spacing here empty 4 and then the paragraph itself is normal font size normal font weight It's just a little bit grayer. So I'll change to gray 8 700 we're gonna go here class name

[10:46] Empty 4 let's go text base, which is the default just to check what the line height is and I think it's yet 24 So we can remove that but we're gonna go text gray 700 and look at this. It's starting to take shape I said we don't care about colors, but let me just change to a lighter gray

[11:07] Maybe 300 for the border just so we are a little bit closer. So instead of black gray 300 All right And look at this now feel like the card is starting to look very close to what we should have in the design Next we can move to the button. So first of all

[11:22] 24 is the spacing and then the button text is going to be 14 pixels. Whoa, that line height is a bit sus but 14 pixel font size and we're going to have some spacing here 8 on top bottom and 16 on left right p y 2 p x 4 and

[11:45] The border radius is 4 and we're gonna give this a good old dark grays 800. Alright, so here class name Empty 6 and that's likely not going to work Because our button is an inline element and we want it to behave like a block level element

[12:05] So I'll add the inline block class in line Block and now you can see that it's honoring the margin top will go BG Gray, what did I say 8 and maybe 700 actually based on the swatches that I see rounded once again for pixels P X

[12:25] We had 16 on the sides of 4 and p y 2 I believe and Text is going to be white and text SM, which is 14 pixels, I don't know about the 16.71 line height, but we can for sure bring it a bit closer than 20

[12:44] So I think SM 4 is going to be 16 pixels So this is good enough and we can blame the designer for being imprecise instead So, let's look at our button. I've done something wrong with the rounded corners, obviously

[13:01] 16 and 8 is correct. The font weight is 400. So I just need to fix my rounded corners. What have I done? I've done a typo and you haven't told me I did round I forgot the D for round did and now I should have a pretty cool button. I will add hover BG gray

[13:21] 900 so it feels a bit more interactive. Hey, look at this. So this is our top card sort of done It's looking pretty good. And now we're going to tackle these two Elements down here and I will actually keep the browser narrow like this

[13:35] We're gonna have black text for the first one and white text for the second one and also black and white text But I'll add a little transparency and I imagine this is how this is being handled Yep opacity is 60% here. Okay, but we don't really care about colors once again, so let's focus first on the padding

[13:55] So we got 48 vertical and 32 on the sides So both of these instead of P10, which is 40, it's going to be PY 12 which is 48 and PX What was it 32? So 8. All right

[14:11] Next let's make the text centered and stacked on top of each other and we can actually achieve both by giving a Class of grid to the parents a one column grid will stack things together We'll be able to handle the gap between things and also we can place items center to put it right in the middle

[14:29] So look at this for both. I will go grid and then place items Center and that will magically fix literally everything so now we can Change the styling of the type, but we have our container Set pretty right. All right

[14:48] so the font weight is 900 which is black the maximum and then 36 pixels and we'll keep it black and I believe the font size is the same Okay. So what did I say? I already forgot 36 pixels. This is on a second span for each card

[15:04] So class name equals font black text. I forgot again. I think that was 32 pixels for Excel No, it was 36 pixels So it is for Excel and that alone making that chunky and big is going to start to make our UI

[15:22] Look much closer to a finished product. I'll change the text here to white actually I can do it on the parent Because both these will inherit the color Nice and then here for the text we want uppercase font medium Again the line height is very sus, but we're gonna go with our

[15:45] 16 like before. Oh, we have the letter spacing here again. So text XS tracking arbitrary value and Font medium and I said the grid would handle the gap, but there is literally no gap between both So it's a gap of zero, I guess. All right

[16:03] So I'll try the multi cursor thing again by selecting these two and going in the first span So we had font medium for the weight Text small which is 14 pixels like I did before I think adding slash 4 will go 16 and then tracking

[16:23] 0.02ms and while I'm here, let's go uppercase as well and remember opacity 60% Hey, this is starting to look pretty good. I just realized there's probably rounded corners on the cards Yep, so is it again for my goodness?

[16:42] So, you know what at this point we keep adding the rounded 4 pixel everywhere and this now starts to feel like a Design token value and you know what? I am very tired by the time recording this I just realized that actually the rounded value here is 4 pixel, which of course I knew but now I wasn't thinking of it

[17:01] So I've been using these custom scales so we can remove the 4 pixel here and up there You've probably screamed at me while I was explaining this and we're going to pretend I never made that mistake So we have now 4 pixel rounded

[17:19] Everywhere that we need the last place where we needed that was both these cards rounded Also another thing I just realized The prettier plug-in seemingly wasn't working But what happens is I'm currently for work working on a project where I cannot format with prettier because there's eslint

[17:39] Formatting that can conflict with it. And so I had disabled format on save So let me quickly go here and find a format on save and you can see that here This is a tragedy It's commented out. So let's bring it back. And now when I hit save ah

[17:57] Here we go, everything is jumping into place. So if you've been wondering why this is messy from the start This is why but we're going to keep rolling with it because at the end of the day we are still Successfully building our design as you can see right here. So I believe this is all

[18:17] The correct I might add a min height of screen here on the container So we don't have that little white bit. So right at the top I'm gonna go min height Screen, there we go. And I believe this is all let's look at the design. We have taken care of font sizes for all these things

[18:40] Is there a border on these cards? No, there is not There's the 32 here We've taken care of this this this and so now what we can do is just do the Responsive adjustment at the large breakpoint or small breakpoint and up. Sorry, and we should be good

[18:57] So starting at the top the vertical padding switches to 48 pixel So py6 is 24 and so at the SM breakpoint We're gonna go py double that to 12. The next wrapper has 32 all around whereas it used to be 24 all around so again

[19:16] We are now here p-6 and then small breakpoint p-8 Subtle stuff, but it makes a difference and you will see the jump at the small breakpoint right there The font size was at 12 it is still at 12 then it was 24 and here it goes up to 36 or 30. Sorry and 36

[19:39] Line height font size for the heading tag 2xl and then at the SM breakpoint we go text 3xl I believe 30 and 36 perfect the gap remains 16 and then 24 that's the same and the font size does not move

[20:00] Button was 14 Huh? Interestingly, the line height is now 20, but it was all Messed up here at 16. I Honestly think that Okay, I'm going to be honest with you. I've designed this and I've made the mistake I wanted the button to be like this 14 20

[20:20] and so this is here wrong and because I have the powers of Changing that file. I will change it now. I will go here and the line height here will be 20 So the button is a little bit more chunked up But this is the value that I want

[20:38] So I'm going to change it because I'm allowed and so we're going to go in the button here and remove this forced up Line height. So this is going to make a button a little bit more chunky, which is good So this card is done. What else is there to change? I believe the spacing remains the same

[20:57] Oh, no, actually, I'm going too quick. I'm a bit sloppy today The padding around the card is 32 all around and I think it was 24 Yee, so we also need to change that from 6 to 8 and this one would be the third one the card here so sm p

[21:18] Dash 8 the spacing around the card, but also inside the card changes Everything looks good. So now it's about these two Elements, let's see. The padding was 48 32 and it remains 48 32. Yeah This text was 14 pixels stillies

[21:41] The other text though is way bigger. It was a 36 pixels and it's going to 60 pixels with a line height of 1 60 pixels monstrous, so literally nothing has changed Except the font size of This text for Excel which at the SM breakpoint

[22:03] Go text 9xl. No, it's not 9xl This is going to be too much, but it is probably gonna be 6xl. Look at me eyeballing it perfectly and so This is what it looks like now. It's a bit weird with the colors

[22:19] I actually told you in the instruction to go grayscale and then I got a little carried away But I think we are in a good place to call it good enough so let's call it a day for this exercise and we're going to move on into the

[22:33] Interesting part and what we want to focus on for this workshop, which is the semantic themable color design tokens

[00:00] Okay, this first exercise is about converting this Figma design, both mobile and desktop, to Tailwind. And I want you to be as precise as possible. Colors aside, I want you to inspect everything. Font size, font weight, spacing, gap, margin, everything between elements.

[00:18] Don't worry about the colors, we're going to look at this later, but everything else should be as precise as possible. And it's all about attention to details. And by the way, if you want to get really good at Figma to Tailwind conversion, I have a workshop dedicated to just that. It's

[00:34] called Pixel Perfect Figma to Tailwind, and you should check it out if you want to really take your game of converting a design to Tailwind CSS as pixel perfect as you can. All right, so like I said, make sure that you inspect every little detail that you can, all the spacing,

[00:50] and also what changes between the desktop and the mobile versions. There's a lot of little differences. And try your best to recreate a high-fidelity conversion. 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

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

Design Implementation

Transcript