All solutions

What are you most proud of, and what would you do differently next time?

I used the Tailwind Typography plugin, which set some nice defaults for the recipe page.

What challenges did you encounter, and how did you overcome them?

The table was a little finicky to get the right look, but I managed to get something close to the design with some questionable use of Tailwind 🙈

What specific areas of your project would you like help with?

A couple of areas felt a little "hacky", like the table. If anyone has a better/cleaner solution, I'd love to know what you did!

Also, if there are any suggestions for improving my use of Tailwind classes, especially any simplification / removing any redundancies or "best practices" that I should follow.

What are you most proud of, and what would you do differently next time?

It resembles the target design, so I guess that's good 🙃

What challenges did you encounter, and how did you overcome them?

Not having the design files (Figma) made it more challenging when it came to sizing things outs. There was a lot of estimating and fiddling!

What specific areas of your project would you like help with?

Any semantics or accessibility suggestions to improve my solution. Also, any improvements in my use of tailwind classes?

What are you most proud of, and what would you do differently next time?

I tried a couple of new things: arbitrary values in Tailwind classes (e.g. rounded-[20px]) and auto class sorting using Prettier with the Tailwind plugin.

What challenges did you encounter, and how did you overcome them?

Matching the design in Figma. I got a 98% or so match, but an exact match was elusive. Despite matching the padding/margins, font sizes, weights, etc — there was still a slight discrepancy in the layout. Not a big deal, but I'm curious to know why.

What specific areas of your project would you like help with?

What caused my solution to be off by a few pixels from the design? I couldn't figure this out so I'd love some suggestions/feedback on this!

What are you most proud of, and what would you do differently next time?

I used the built-in Tailwind CSS utility classes, so my solution isn't pixel-perfect. This was intentional to keep it simple. However, I did use the custom Outfit font.

Next time, I would try to create some custom Tailwind classes to match the project spec better (colours, font size and line height).

What challenges did you encounter, and how did you overcome them?

None. The project was straightforward.

What specific areas of your project would you like help with?

The classes I used to layout the card seemed to work, but perhaps there is a better/cleaner approach?