Interactive Rating Component in React, Styled /w TailwindCSS

Solution retrospective
Q: What did you find difficult while building the project?
A: Getting a precise render, for example, I found the radial gradient for the card container to be pretty tough to guess just by looking at the design. I feel like Figma would have helped greatly here.
Q: Which areas of your code are you unsure of?
A: Overall neatness and correctness. I'm not sure if this is idiomatic React as I've never had my UI code reviewed before, which I very much look forward to.
Q: Do you have any questions about best practices?
A: I'd rather have someone just review what I have and hear what they have to say. I'd also like to know what the best way is to use TailwindCSS in React, since things can look pretty messy due to the abundance of classes being used.
Harsh but respectful feedback is super welcomed.
Thank you for your time!
Please log in to post a comment
Log in with GitHubCommunity feedback
- @Sdann26
I can answer what there is about Tailwind, since I use tailwind + next.js + react.js (obviously), at work.
And if it is ugly that large lines of classes are formed but that is why you must use the components well or create a directory where we will have the components where the classes are repeated enough, even so it may still be formed enough if you want to have them more orderly you can download the VSCode extension called Headwind, but in theory it is one of the shortcomings of using Tailwind.
By the way if you want to eliminate the errors in your report you could change the div with the id="root" for a main with the id="root".
Good Coding!
Marked as helpful
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord