Responsive component using React and Tailwind.

Solution retrospective
Feedbacks are important! :)
Please log in to post a comment
Log in with GitHubCommunity feedback
- @tatasadi
Hey there,
Great job on completing this challenge! It's impressive to see how you've leveraged React along with Tailwind CSS to build a responsive and interactive component. Let's dive into some targeted suggestions to refine your code further.
Tailwind Breakpoints and Responsiveness
Instead of relying on JavaScript to listen for resize events to adjust the layout for different screen sizes, take full advantage of Tailwind's responsive utility classes. Tailwind's framework is designed to handle responsiveness with minimal custom CSS or JavaScript, making your code cleaner and more maintainable. You can remove the isLargeScreen state and the effect that listens to the resize event, and instead, directly apply responsive classes in your markup.
Usage of showAvatar State
The
showAvatar
state seems to be used to toggle the visibility of theAvatarComponent
based on theshowShare
state. If the intention is to hide the avatar when the share component is visible, consider simplifying this logic by using only one piece of state. For instance,showShare
could be enough to control the visibility of both components, assuming they are mutually exclusive.Naming Convention in Tailwind Config
In your Tailwind configuration, you've used camelCase for naming colors. Tailwind's convention and general CSS custom property practices lean towards kebab-case for consistency and readability.
Before:
colors: { veryDarkGrayishBlue: 'hsl(217, 19%, 35%)', // other colors }
After:
colors: { 'very-dark-grayish-blue': 'hsl(217, 19%, 35%)', // other colors }
These suggestions aim to enhance the maintainability, readability, and performance of your project. Leveraging Tailwind's features to their fullest can significantly streamline your development process, making your codebase simpler and more efficient. Keep exploring and applying best practices in your projects!
Marked as helpful - @matsta92
Good code Flávia!
:)
- P@danielmrz-dev
Olá @flaviare1s!
Ótimo projeto!
Já partiu pro React?? Como estão indo os estudos?
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