Design comparison
Solution retrospective
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.
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!
Community feedback
- @huyphan2210Posted 2 months ago
Hi, @jboys
I checked out your solution and had a few thoughts:
- I noticed you don't have access to the design files, so I assume you used another tool to get as close as possible to the design.
- As for why your solution is around 98% accurate but not a perfect match, it could be due to small differences in things like
font-size
,line-height
,letter-spacing
,font-weight
,padding
,margins
, etc.
Personally, I don’t think being pixel-perfect is something to worry about, and I believe you did a good job!
Hope this helps!
0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord