FAQ Accordion built with React and TailwindCSS

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

I am most proud of having learned a new CSS framework. Having tried Bootstrap out in the past, I found that it was too rigid and didn't allow for enough customization. With Tailwind, I like that it is utility-based and lets me customize everything while minimizing the amount of typing I have to do.

I also like that this time, as opposed to past projects, I focused on building the structure first before worrying about styling.

With my next project, I would like to learn more about grid layouts and implement those, as I currently mostly use flexbox. I'd like to understand more about the intricacies of grid and when it might be the better option.

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

I encountered two main challenges.

The first is that I couldn't get the background svg at the top to be the right size / to take up the right amount of space on the page. I tried setting its width to 100% and adjusting its height, but I found that it would never span the full width of the viewport unless I set the background size to contain. However, doing so prevented me from adjusting the height. I have not found a solution for this.

The second "challenge" (though it was more of a learning experience than a challenge) was that I worked with Typescript for the first time, which had me running into some issues where variables' types weren't defined properly or were contradictory. However, this was actually helpful as it helped me catch logic errors that I otherwise would've missed.

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

As described above, I failed to get the svg for the background image to be the right size. The image currently takes up too much of the viewport height, but if I don't use background-size: contain, the image won't take up the full width of the viewport despite setting it to 100%. I'd be grateful for insights from others and advice on how to solve this.