Project Setup

Before putting our designer hat on, we need to take a few steps to make sure our project is set up for success.

We'll start by writing completely unstyled markup, so we have a working baseline. A document that makes sense, even if it was completely unstyled.

Technically, we'll be 📜 writing JSX.

But the output in the browser will be HTML.

The Figma design uses some colors, fonts and breakpoints that are not part of the 📜 default Tailwind theme.

We need to configure those.

Remember: we're going for a "Pixel Perfect" recreation here.

So let's sweat the details from the get go, and align our Tailwind theme with the design decisions made in Figma.