Submitted 7 months ago

Recipe Page w/ Astro + Tailwind

astro, tailwind-css

tmykkanen•140

@tmykkanen

A solution to the Recipe page challenge

Preview Code

Solution retrospective

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

I'm really happy with how the container queries / grid layout worked to get the spacing consistent.
I liked working with ::before for better ul / ol styling.

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

I had to figure out how to do the custom styling on the ul / ol lists. CSS tricks was helpful.
I didn't realize I'd have to style the table by hand with tailwind, but once I did, it wasn't too difficult.

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

Code organization: I'm not a huge fan of the code in several different places. I put the base-layout in a @component for tailwind to pick up, but perhaps it would be better in the scoped style in the index page?
I went with @apply rules in for styling the scoped styles. I could write vanilla css. Not sure if there's pros/cons one way or another? I went with @apply so I didn't have to hardcode sizes and could use tailwinds utility sizing.

Code

Please log in to post a comment

Community feedback

No feedback yet. Be the first to give feedback on tmykkanen's solution.

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