Design comparison
Solution retrospective
I learned how to use custom CSS stylings to customize and override Tailwind CSS' default properties for lists. I did end up spending a lot of time on the Nutrition section trying to get the layout and spacing right. I didn't realize it wasn't centered in the middle on desktop and mobile. Next time, I will analyze the reference image better to not take up extra time.
What challenges did you encounter, and how did you overcome them?I initially did not know how to customize the bullet points and numbers in Tailwind's default list. I did some googling and realized I can use li::before
plus more to customize it myself.
I'd appreciate any feedback!
Community feedback
- @mofadaPosted 4 months ago
Actually, tailwind css support list-style, you can watch this page setting-the-list-style-type
and then,
Instructions.Beat the eggs:
here, You can use :before Pseudo-classes to reduce nesting levels and simplifies HTML。 like this:<li class="before:content-['Total:'] before:text-stone-600 before:font-bold pl-4"> Approximately 10 minutes </li>
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