
Product Preview Component with Tailwind CSS!
Design comparison
Solution retrospective
This is my first time using Tailwind CSS and I'm happy with what I produced. What I would do differently next time is to try to get precise measurements with certain elements on padding, margin etc. I didn't have access to the Figma file so I didn't know what the measurements were. I would have converted the mockup screenshots into a Figma design.
What challenges did you encounter, and how did you overcome them?There was a learning curve with Tailwind. I didn't realize there were additional steps to install Tailwind. Also, I didn't know much of the syntax for styling certain element such as padding, hover etc. I overcame this learning curve my referencing this cheatsheet from Nerdcave. https://nerdcave.com/tailwind-cheat-sheet
Overall I can see why Tailwind is really popular. It saves a lot of time - I just need to get used to seeing styling on an html/js page
What specific areas of your project would you like help with?What's the difference between using App.css and index.css? I ended up putting the base styles on index.css but I didn't put anything on App.css.
Community feedback
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