00:00 It's time to configure our Tailwind theme to be aligned with our design file. As mentioned earlier, we have these custom colors, and we have these custom font sizes and breakpoints, and we want to make sure that all of these are codified in the Tailwind theme so that we can use utilities that apply perfectly and specifically for this project.

00:17 In a way, we want to use Tailwind to create a bespoke custom CSS framework that feels like it's been designed specifically for this Figma file. You're going to do most of your work in the Tailwind config file, the JavaScript file that is, and I want to make a note on that point. In Tailwind CSS version 4, you can configure your theme directly in CSS.

00:36 If you're working on a v3 project, you still have to use the JavaScript config file. The JS config is not going anywhere in v4, it'll still be supported. So if you want to port a project from v3 to v4, you can still use the JS config. With that in mind, in this workshop, we're going to use the JavaScript configuration, assuming some folks are still on v3.

00:56 But in the last segment of the workshop, we're going to port everything to v4 and the CSS configuration. So you can see what it takes to port a project from a JavaScript config file to a CSS config file if you need to do that. So if you're taking this workshop, but you're already on version 4 of Tailwind, rest assured that the JavaScript config file still works.

01:16 And also at the last step, we'll take all of our JavaScript configuration and move it to CSS to be compatible, or like best practice, first party approach of Tailwind v4. I just wanted to make sure that this is perfectly clear because this is sort of a big deal. But for the whole workshop here, we are going to work in JavaScript. Go with it.

01:35 Just know that at the end, we will port all of that stuff to CSS. And yes, I have repeated myself again. So among the things that you will need to configure are the screens for the breakpoints, the colors, the font family with the Poppins font family. And on that note, you'll see that in the index.html file,

01:55 the font files or the way to load the Poppins font from Google Fonts has already been handled. So really, all you need to do is configure the font family in Tailwind and then add the class to the body tag. So it's applied to the whole project.

02:09 You will also extend the font size object to add the 4.5 and 5.5 XL font sizes, which are defined here and down here. So the first number is the font size and the second number is the line height. So here, 2.625 rem for the font size

02:28 and 1.15 as a unit less value for the line height. And pro tip, make sure you do not forget to update your content array to make sure everything works properly. And once you've done all of this, to verify that our new token values in the theme work, what we're going to do is wrap the word epic here.

02:47 Let me make it a little bit bigger. So yeah, we're going to wrap this epic word in a span that has the highlight color. So it looks like this. That'll happen in the app.tsx file right there. And if that works, that means our new custom utilities are set up properly and we're ready to go with the build. Good luck.