Responsive Product Preview Card Component Using Tailwind css
Design comparison
Solution retrospective
Experimented with Tailwind CSS for the first time, and thoroughly enjoyed the experience!.
What challenges did you encounter, and how did you overcome them?Nil.
What specific areas of your project would you like help with?Nil
Community feedback
- @Smart-Ace-DesignsPosted 5 months ago
Hello. Nice work on your first attempt with Tailwind CSS!
One suggestion I can offer is how you handled spacing "Perfume":
<p>P E R F U M E</p>Instead of hard-coding the spaces between the letters you can use the "tracking" CSS class instead, which adds spaces for you:
tracking-[.35rem]In my case I had to specify and exact value by using the "[ ]" syntax to get it to look as close as possible instead of using one of the pre-defined values.
https://tailwindcss.com/docs/letter-spacing
You can also use the "uppercase" class to force the characters to all uppercase for you. I am not really sure of the advantage to using that instead of using typing all uppercase, but that is what I have seen other people do in some tutorials and it seems to be "best practice".
https://tailwindcss.com/docs/text-transform
0
Please log in to post a comment
Log in with GitHub
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