Blog preview card using tailwindcss, next.js, flexbox

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

I take pride in the fact that I've gotten used to UI development in just a few days. This time, I introduced "prettier-plugin-tailwindcss." Next time, I want to customize the elements listed in the design system to make them more suitable.

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

The first challenge was with the Image tag from Next.js's next/image. Since the height and width were automatically adjusted, I had to set fill, but controlling its behavior was quite difficult. I found a YouTube video explaining how to use it, which helped me resolve the issue.

The second challenge was customizing Tailwind CSS. I solved this by reading several articles and the Tailwind documentation. However, I realized that my knowledge is still far from sufficient.

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

Since my knowledge of React, Next.js, and Tailwind is still shallow, I appreciate any kind of feedback.

What I’m particularly concerned about is how much and how to customize the design system. I understand that in the Utility-First approach, premature abstraction should be avoided, but I’m not sure how to strike the right balance. If you have any insights, I would greatly appreciate it.