Designo agency website build with Nextjs + Tailwind CSS + Typescript
Design comparison
Solution retrospective
I would like advice about:
- Add dynamic background-image to component with props
- Best practices for write correct Interface/Type of components
Community feedback
- @BParadowskiPosted about 1 year ago
Hey,
In my version of this challenge I defined the backgrounds in tailwind.config.js (because I wanted to have control of the background's position with css) and later applied them based on the page url, not props. You can take a look at the implementation here. I find it elegant enough.
My advise with regards to components would be to have fewer of them and to create them only when they are actually needed. The same goes for props. Let's take a look at your social media links component in the footer.
First of all, making it a component makes sense (it serves some dedicated function and can be separated from the rest of UI) but it is not necessary since you never reuse it. With regards to props however - it needs none. There is no reason to generate a (potentially different) list of social media links since there aren't that many of them. You should have simply hard-coded the links and images - no problems with props that way.
The last piece of feedback I'd like to give you is to treat Tailwind more like a design system. You are greatly overusing arbitrary values in your code (the things inside
[]
). By doing that you are defeating much of the purpose of using Tailwind as a framework. Recommendation: Less pixel-perfection and more of using the tools provided.Happy coding
Marked as helpful1
Please log in to post a comment
Log in with GitHubJoin 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