@tatasadi
Posted
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 the AvatarComponent based on the showShare 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
@flaviare1s
Posted
@tatasadi , Wow, thank you very much for your considerations! I'm still starting to enter this world of technology (I started studying five months ago) and Tailwind started last week, so for me it's still very difficult, I have a lot of doubts. Your tips were very valuable! Thank you very much!
