Responsive expenses chart component using React and TailwindCSS

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

I learned how to write custom Tailwind classes. I had values for padding, colors, font size, font weight, and border radius that differed from TailwindCSS' default styling. I extended TailwindCSS' styles in tailwind.config.js.

theme: {
    extend: {
        ...
        colors: {
            'soft-red': '#EC755D',
        }
        ...
    }
}

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

While figuring out how to dynamically set the height of each bar chart, I used string interpolation to generate an arbitrary TailwindCSS class for the height. After a few tests, the bar charts weren't visible.

I googled this issue and discovered that TailwindCSS doesn't recognize dynamically generated classes using props with React or Vue. I decided to use inline styles to set the height.