Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Recipe Page with tailwindcss and some pain

P

@vstm

Desktop design screenshot for the Recipe page coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


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

Styling the spacing of the list items was somewhat tricky, I overcame it by playing around and then finally applying some magic amount of padding to it.

Also I had a strange difference in the height of the lines in the table (24px in the design and 23.5px in the browser), and I could not find out what it was. The settings were as per the text presets.

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

If anyone has some tips on styling list-items (/) well, that would be awesome.

Community feedback

Alex 3,130

@Alex-Archer-I

Posted

Hi!

Can I assume that the most pain was from tailwind? =)

But actually you did it quite good! (there is a text isn't properly aligned in the table, but that's not a big deal =))

I see that you are already styled markers for list-items. What exactly do you need to help with?

1

P

@vstm

Posted

Thank you for the comment - yeah some of the pain was from tailwind, the other was from styling the list-items :D. But I was indeed thinking to use sass for a while (some form of tailwind ennui is creeping in)

Ah yeah the alignment of the first column in the table is wrong, crap - I should have paid more attention :D. Thank you for pointing that out!

Well the styling of the list-items in terms of color/font was not a problem with the ::marker pseudo selector, but applying the spacing from the design seemed a bit cumbersome to me. I had to apply some left padding to the <ul> and then another padding to each <li> (as per the tailwind philosophy :D). IMHO it would be more convenient to just apply margin or padding tho the ::marker to define the space before and after the bullet. But that was one of my learnings here, that ::marker does not allow margin/padding properties to be defined.

1
Alex 3,130

@Alex-Archer-I

Posted

You're welcome, as always =)

You know, I think that tailwind doing it best when you are working on the small components, but really doesn't fit to the big solid projects like landings (guess like every tool is good for some cases and not for others).

Oh, yeah, ::marker has a very few styles which could be applied. That's why sometimes it's better to replace it with ::before.

Guess the only cool thing with markers is that you can easily replace it with some icon, but than again you can do it with before as well =)

0

Please log in to post a comment

Log in with GitHub
Discord logo

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