Blog Preview Card using TailwindCSS

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

While refactoring my markup and styles for this project, I was reading the Tailwind docs and found out that the font size utility class can take a modifier for line height. Previously I was leveraging font size and line height like so: text-sm leading-normal sm:text-lg sm:leading-normal. However with the modifier, there isn't a need for the additional utility class, which I think cleans up the code nicely: text-sm/normal sm:text-ls/normal.

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

I did get a little too focused on the Figma design file on this project. Specifically when it came to the border on the card. In my first iteration of the markup and styles, I used the ring utility class to create the border as the Figma file showed in "inside" border style for the card. However, I neglected to realize that because of the default box-sizing: border-box on each element provided by the reset of Tailwind, borders are inherently inside the elements. I did fix this by returning to the normal border utility class after refactoring my code.