Interactive rating component solution

Solution retrospective
what are some tips to shorten the code in tailwind css
Please log in to post a comment
Log in with GitHubCommunity feedback
- @AGutierrezR
Hello there 👋. Good job on completing the challenge!
I have some suggestions about your code that might interest you.
-
You could organice your own base CSS using the base layer of tailwind
@tailwind base; @tailwind components; @tailwind utilities; @layer base { * { margin: 0; padding: 0; box-sizing: border-box; } }
This makes sure that this portion of code is loaded in the correct layer.
-
In order you reduce the amount of classes in tailwind you could create components with the most use clases, for example the score buttons To make a component you should added to a tailwind later in the
style.css
file@tailwind base; @tailwind components; @tailwind utilities; @layer base { * { margin: 0; padding: 0; box-sizing: border-box; } } @layer components { .score-btn { @apply circle h-12 w-12 bg-gray-700 flex justify-center items-center rounded-full hover:bg-gray-500 hover:text-white active:bg-orange-500 focus:bg-gray-500 focus:text-white } }
And now you should be able to use you new component in your html
<div class="five_circles my-8 flex justify-between text-gray-400 font-semibold"> <button class="score-btn">1</button> <button class="score-btn">2</button> <button class="score-btn">3</button> <button class="score-btn">4</button> <button class="score-btn">5</button> </div>
Be careful not you overdo this practices, try to keep it simple, in this case, is something that you want to change and have a reaction in more element without having to change each element separately.
Also, remember to run the build to see the final result in the screenshot
I hope you find this helpful 😁. Most importantly, your submitted solution is fantastic!
Happy coding!
-
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