Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Interactive card details with Tailwind CSS

#tailwind-css
Bruno Costaβ€’ 40

@BrnCosta

Desktop design screenshot for the Interactive card details form coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


This was my first time using Tailwind in a project

Any tips and feedbacks are more than welcome.

Thank you!

Community feedback

P
Dave Quahβ€’ 670

@Milleus

Posted

πŸ‘‹ Hello! Congrats on completing the challenge.

Tailwind actually comes with preset font-sizes, I'm curious why not use those instead? e.g. text-xs which is 0.75rem (12px), text-sm which is 0.875rem; (14px), etc?

Alternatively, font-size could be overwrote with your own set of sizes via tailwind.config.js.

Also, one tiny trick that could help with writing lesser code is to use the gap (flex and grid) or the space-y and space-x utilities. They help to add gaps or margin between child elements so you wouldn't need to keep adding margins to every child element 😊

Hope this helps and happy coding~

Marked as helpful

0

Bruno Costaβ€’ 40

@BrnCosta

Posted

@Milleus Hello Dave!

This was my first time using tailwind, so I'm not used to all his features. But you're absolutely right! In my next solution, I'll use it.

Thanks for your comment and tips, I appreciate it!

0

Please log in to post a comment

Log in with GitHub
Discord logo

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