Blog Preview Card with Tailwind CSS

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

I know I can simply just use plain HTML, CSS, and JavaScript but I couldn't help myself using Vite as my main development build tool for simple projects.

I also use React because I've been using it for several years on different projects and I love writing code in JSX.

Of course, Tailwind CSS is the highlight of this project. I'm so happy that Tailwind CSS has improved a lot over the years by adding support to the CSS grid and more.

I commend the Figma design. It's a well-thought design which makes it easier for me to work with spacings, sizes, etc.

Overall, the total DX is great and I'm proud of it. Cheers! 🎉

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

I'm trying to make a general rule of thumb for myself to deal with CSS layouts.

• Grid = Layout
• Flexbox = Component

So trying to be a hotshot, it was a challenge for me to recall how to use a CSS grid just to center a component (blog preview card). After a little research, I managed to resolve my problem. I highly recommend to use this tool to visualize your CSS grid here

Then for the card component, I use Flexbox which I overly use for everything.

Support for CSS grid in Tailwind CSS is fairly limited but it has the common usage for the grid. One thing I like about Tailwind CSS is that you can write custom CSS that is not supported with Tailwind CSS utilities.

You can read more information on the docs here

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

Please feel free to ask me some questions or give me some feedback. Cheers! 🍻