00:00 All right, let's do this. I'll quickly remove the comments about Tailwind v4 config now that you're aware of this and we'll go through things in the order of the comments here. So the first one is the screens object which is used for the different breakpoints. So screens and you can see autocomplete suggestions being super useful and I'll add a comma before I forget and I'm quickly

00:19 going to pull up the Tailwind CSS documentation and look for the screens customization so we can see the default screen sizes. So you can see small is 640 then 768 then 1024 1280 and if we compare

00:34 this with our Figma design you'll find out that the MD breakpoint and the Excel breakpoint are matching the default Tailwind settings but the small and large are different. So small 520 and large 976 is what we want to configure to replace the 640 and 1024. So I'll close this page and here

00:53 we're going to go small to override the small breakpoint. So we're extending the screens object but we're redefining the SM key so it's going to override this specific one without deleting or overriding the other values in the screens object. And here we want 520 pixels and then for the LG

01:12 we want 1024. Thank you Copilot. I will quickly open the app.tsx file and all I want to do is let me scroll down try one of these classes. Class name equals SM uppercase and you can see

01:27 that the min width is now set to 520 which matches what we've redefined. If I comment that out and hover over my class it should go back to 640 which it does. So that tells me that it's working properly. I'll try the same with LG and so here I'm expecting 1024 yeah but if I was to comment

01:45 that out we should fall back to the default value which is... Looks like I've made a mistake by trusting Copilot and that happens quite a lot. We've refined it to the default value of 1024. What we wanted was actually 976. So let's rectify

02:05 that 976 and now on hover I'm hoping that it shows the new 976 pixels and we're good to go. So apologies for the little hiccup here I will leave this in the recording because I think this is a perfect use case of why you should always sort of fact check what GitHub Copilot is giving

02:22 you. All right so now that I know my custom breakpoints work I'll remove the class name here and also close this file so we have a little bit more space and remove the comment and we can move to the next step the colors object. If we look here black exists in Tailwind and you can see

02:40 this custom color is actually slate 600 which matches the default Tailwind theme so we can keep it and we really only want to customize this highlight color even that one that looks like another custom color it's actually the same highlight at seven percent opacity so if I look

02:59 at the color here you can see that it's using the highlight color but with a seven percent opacity so here the transparency is dialed down to seven percent if I was going back to 100 we'd have the exact same color. So all that to say we just need to define one color it's going to be called

03:16 highlight and the value is going to be 6202FF which I will copy in my clipboard now and we will extend the colors object pass a new highlight color and define it to that hex value and let's

03:31 not forget the comma and since we have that color now we can already do the little epic coloring check on the app.tsx so here I will wrap the word epic in a span and add the class name of text we

03:46 should find highlight here and there it is with the color swatch beautiful this tells me already it's working if IntelliSense can find it and give us the swatch and yep sure enough let me bump the zoom a little bit more you can see that beautiful highlight color and let's go back down to I think

04:02 125 is a good zoom level for my screen resolution here let's remove the comment this part is done and let's head back to our config file we've done this the next thing we want to do is change the font family to the poppins google font remember we already have the font loaded in our project

04:20 so we really just need to customize the tailwind font family object and we'll create a new poppins family and just as it suggests pass an array with poppins first with a fallback to sans serif and there is an extra closing bracket for no reason so you might notice that nothing

04:41 has changed here and it's because we have defined the poppins font family as a utility class font poppins but we're not using it anywhere and this is why we are now going to put this font poppins class on a very high level parent that wraps the whole app and so we can do this on the body tag

04:58 in the index.html file so down here i'm going to scroll down class beware this is not a tsx jsx file this is an html file so we're using class here not class name because this is html so class

05:14 font dash and we should find our poppins font there it is and this is still not working i'll let you pause the video and tell me why this is not working all right so as you've guessed i believe this is because if we look at our tailwind config file

05:35 again and we scroll up to the content array what we've defined here is .src and then anything that ends in ts, tsx, js, jsx so if i open the file browser the src folder is that one and so tailwind

05:50 is looking into all the typescript and javascript files inside the src but we have applied our font poppins file in index.html which is outside of the source directory and also ends with html so

06:05 tailwind does not look at it at all and therefore ignores these font poppins and so this specific class does not generate the appropriate css that it needs and so we need to add the index.html file

06:18 in the config file we can do this by adding a second line here and go current directory index dot html and as soon as i save this look up here three two one save here we go now we have switched

06:33 to the poppins font which looks fabulous happy days we can remove this comment now let me also clean up the comment in the index.html file and let's look at what is left for us to do we've

06:49 done the font family the next thing we want to do is the font size object as i mentioned the designers have specified the font size and line height for all the font sizes and actually it

07:01 takes 4xl and 5xl are the default values found in tailwind css theme by default and what we really need to add is the custom in between 4.5xl and 5.5xl so this is a very similar process to the

07:17 screens we've done for the first step of this exercise you can see we have some descriptive comments for both as per the font size and line height so you don't need to switch back and forth between the figma design this is really helpful because it also helps copilots know what we want

07:32 to do so my guess is as soon as i go font size it is going to know exactly what i want hey look at this but this time i'm going to fact check 4.5xl two six to five yes and 1.15 i like that it

07:47 highlights to tell me that it's the same and then 5.5xl we have three three seven five and one well copilot you've redeemed yourself well done so you can see uh that's the tip from the money bag tells us that you can use an array that's something good to know in tailwind config let me

08:06 pull up the docs once again font size if we scroll down to the customizations you can see by default you can just pass the value here or if you want to be more specific you can pass an array a tuple where the first value is the font size and the second one is the line height which is what we

08:25 do here and you can take it even further if you want to define things like letter spacing font weight always the first index of the array will be the font size and then you can have a config object with more key value pairs like that so here we use this config approach which is an array with

08:43 two values without keys first one is the font size and second one is the line height i can close this and i can remove all of that and i believe with that we should be done i'm quickly going to verify that everything is working properly let's go back to class name on our h1 doesn't matter what we put

09:02 it's really to try things so we've tested the colors up here we've tried the screen sizes we've done the font pop-ins but i want to test the font sizes so text 4 and there's our 4.5xl and as you can see it defines both the font size and the line height which is phenomenal phenomenal

09:23 sorry about that i had too much coffee today uh okay so let's just verify for good measure that it also works at the small break point so it should wrap in our custom 520 and everything is working swimmingly i am super happy with it and with all that out of the way i think we can now

09:41 put our designer hat on and start transcribing this beautiful design in figma to a functional tailwind css website