Skip to content
Submitted 2 months ago

Blog Preview Card w/ Tailwindcss

tailwind-css, node
tmykkanen•140
@tmykkanen
A solution to the Blog preview card challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What are you most proud of, and what would you do differently next time?
  • I usually use frameworks, but I didn't for this one. So I had to set up a dev environment including tailwindcli and live-server. I understand these tools better.
  • I tried using semantic HTML rather than divs. Not sure I did it right, but I learned a bit more about it.
  • I gained greater understanding of tailwind components using @apply.
  • I'm trying to write better commit messages.
What challenges did you encounter, and how did you overcome them?
  • The basic parts of the project were pretty easy. I haven't used a lot of box-shadow stuff, but the tailwind docs / css docs helped me out.
  • I wanted to animate the transition for the box-shadow. I read a recommendation to animate the opacity of ::after, but couldn't really get that to work well. So I just animated the box-shadow itself, which seemed to work ok.
What specific areas of your project would you like help with?
  • Is there a better way to do the animation? Maybe something cool for the hover of the article title as well?
  • How could I best organize the tailwind styles? I used @layer components for the text styles to try to organize / group them, but the class lists in the html still feel cluttered. Should I put everything in a component (e.g. .article) and use @apply?
  • I wasn't sure how to do smaller text on mobile without @media queries. Ideas?
  • What is the best way to size the width of the <article>? I have it set with width:px, but I'm wondering if there's a better way to get the proper width?
Code
Loading...

Please log in to post a comment

Log in

Community feedback

  • Daniel•500
    @Dani234jf

    You can set the main height to 100% to ensure it is centered on all screen sizes. For responsive text sizing, you can use something like clamp(min-font-size, 2vh, max-font-size), where the vh unit helps adjust the size dynamically based on the viewport height.

    Avoid setting a fixed size, let the inner elements automatically determine the size of the outer container.

    Hope it helps!😀

    Marked as helpful

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