00:00 Welcome to the Pixel Perfect Tailwind Workshop. I'm so excited that you decided to join me on this adventure. And before anything else, I want to say a big thank you. In this workshop, we're going to implement a real-world redesign of the EpicStack website's homepage, starting from scratch. We'll work from this Figma file, which contains designs for five different screen sizes,

00:19 as well as some information about things like colors, font sizes, typography, and interactions. We're going for a Pixel Perfect implementation here, and we'll fact-check our work by taking a screenshot of the Figma design and then laying it over our browser rendering to see how closely we match up.

00:38 To set up our project for success, we'll start by configuring the Tailwind theme with the various colors, the font family, the font sizes, etc., according to the design specs. We'll also write completely unstyled HTML markup before we even think about the design implementation. We'll then start to design our homepage,

00:56 and we will start with the mobile design first. So we'll make sure that this version of the design lines perfectly and then work our way up using an approach that lines up really well with Tailwind's mobile-first philosophy. After that, we'll cater for all the subtle and not-subtle design changes at all the different breakpoints.

01:16 And there, we'll do multiple passes to make sure that everything goes through the fine comb. So maybe we'll start with the spacing between elements. We'll also cover different font sizes and make sure that we really take care of every little detail for each breakpoint.

01:32 Once we're done with this, we'll scaffold this fancy art-directed grid you can see here at the Excel breakpoint, which is one of the most unique part of our design. So this might look daunting at first, but you'll see that it's actually pretty easy thanks to the powers of CSS Grid. At this point, our design will be almost complete, but we want to make sure that we do not forget

01:51 the interaction hover and focus states as they are defined in the Figma spec. So you can see the text hover and focus styles as well as the logo tiles hover and focus styles. And at that point, our design would technically be complete. We could stop there, but we're not going to. We don't want to settle for just good enough.

02:09 Nope, we want to wow the designers and add a lot of little delights that they may not expect, but will definitely enjoy. We'll start by adding subtle enter animations so that the page load feels extra polished. We'll then tackle an ambitious staggered role reveal effect on the logo grid, one step at a time. Again, pretty scary stuff, or so it seems,

02:28 but you'll see that you'll be able to understand all the moving parts and acquire new animation superpowers. Again, we could stop right there, but let's keep pushing. How about using the fancy CSS subgrid to align both the logo tiles and the text contents to a common parent grid? This is a pretty cool technique and should give you lots of ideas

02:46 if you want to push the design even further after the workshop. And finally, we'll take all our JavaScript's Tailwind theme configuration and move it to the Tailwind version 4 CSS theme configuration. This process will help you understand the differences between both JS and CSS Tailwind theme configurations

03:03 so you can be fluent in both V3 and V4 Tailwind projects. All right, we've got a lot to do. I hope you're ready to have some fun. Enough talking, let's jump into the first exercise.