Tip Calculator with React, Tailwind-CSS and TS

Solution retrospective
I’m proud of using TailwindCSS for the first time and successfully implementing a responsive, clean UI. It really shines for basic layout and styling—it’s fast and intuitive. However, when dealing with dynamic or conditional styling, I found it a bit verbose. Next time, I’d consider combining it with utility functions or classnames libraries earlier on to keep my code more readable.
What challenges did you encounter, and how did you overcome them?A key challenge was managing class specificity and ensuring the right styles were applied when several utility classes conflicted. I overcame this by leaning on Tailwind’s helpers like !important (!px-4) and using tools like clsx to manage conditional classes more cleanly.
What specific areas of your project would you like help with?I’d like help refining the handling of dynamic styles in Tailwind—especially for things like: • Animations or conditional transitions • Styling inputs with icons and responsive behaviors • Improving class readability when values depend on state
I’m also open to suggestions for better structuring components or optimizing Tailwind configurations for scalability.
Please log in to post a comment
Log in with GitHubCommunity feedback
No feedback yet. Be the first to give feedback on Mars - Martiniano Leguizamon's solution.
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