Responsive landing page with graph animation using React & Tailwind

This is the first time I ever touched Tailwind CSS. The thing I love about it is that I still had control over how I styled my components through utility. Something that I really enjoyed is that I didn't have to constantly jump between JSX & CSS files. This made it feel like I was saving a bit of time during development.

I love how you can configure Tailwind. In this project, colours & fonts were given, which were easily included in the config file. One thing I had to get used to was putting all the breakpoints in the config file.

I was worried about how everything would look if I used tailwind, but while reading through the docs (https://tailwindcss.com/docs/utility-first), my worries were alleviated. Something I also really loved was Automatic class sorting with Prettier.

The last thing I had to adjust to, was learning how to develop in a mobile-first development workflow. It didn't really take time to adjust, especially considering how you can make websites responsive using Tailwind.

Although the current config file has different screens, colours & font-families, what was lacking was proper spacing & font sizes. This could probably be attributed to the fact that I didn't have access to the actual design file, but rather the images of the designs alone. So I had to approximate the sizes. Using opening the design images in Figma helped when trying to determine things, but it's not always accurate.