Responsive social links profile using vite and tailwindcss

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

I am most proud of challenging myself to use vite and tailwindcss. I won't do that again. Because I feel like I spend more time setting up and configuring the project and my dev environment, than coding it.

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

1. Customizing tailwindcss

After reading docs for several minutes, I found out what I can't redefine default line-height and letter-spacing. So I had to define them manually on every piece of text.

2. Guessing the correct spacing.

Found some online tool that can measure distance between two points on an image in pixels. And learned to measure spacing by eye.

3. Figuring out why hover: prefix won't work.

Turns out that in tailwindcss version 4.0.0 they added media query @media (hover: hover) to the implementation of hover: prefix. That prevented hover effect from being shown in my browser. So I had to use prefix [&:hover]: instead. Which didn't include that media query. And hover state was working again.

4. Setting up GitHub Actions.

Lucky, I have been able to find information online on how to set up GitHub Actions. I still have some trouble caused by my tools.