Design comparison
Solution retrospective
I’m most proud of how efficiently I was able to do it using Tailwind. Its utility-first approach allowed me to quickly apply styles and maintain consistency without writing a lot of custom CSS.
What challenges did you encounter, and how did you overcome them?One of the main challenges I faced during this project was the lack of access to the Figma design file. Without a detailed design reference, achieving pixel-perfect accuracy was more difficult. To overcome this, I relied heavily on the design preview provided and meticulously measured visual elements using browser developer tools. I focused on closely matching typography, spacing, and layout, paying attention to small details like padding, margins, and alignment.
Community feedback
- @aredeanPosted about 1 month ago
Hi, I experienced the same thing when I couldn't access the Figma file. I had to open the design image sample into Figma and re-measure it.
Initially I also immediately used the tailwind-css class to create components, but indeed tailwindcss will not be completely the same because as far as I know they work with rem sizes, while design uses px design; Similar to what you designed.
Finally, I made it with a custom class and custom style to get the closest pixel-perfect.
But, overall we have similar challenges and similar solutions. Keep up the spirit.
0
Please log in to post a comment
Log in with GitHub
Join 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