Design comparison
Solution retrospective
currently I am learning tailwind css and these are my questions :
- does my code violate any tailwind standard or best practices
- when we don't have pre classes in tailwind as here for rounded corners (20px, 10px) should I change default lg or sm classes or add new keyword for it ? like rounded-img
thanks for your future feedback
Community feedback
- @wendyhamelPosted 2 months ago
Hi there, nice work on this challange.
I hope you like working with tailwind. I use it all the time and it saves me a lot of time and helps me keep my code consistent, better to maintain and customisable at the same time.
I do not see anything in your code that violates standards or best practice. Then again, there is a lot of flexibility in how you can use tailwind. Some would like to have their class names in a peticular order, first the classes for the container, then the classes for text so it is better to maintain: you always know where to look.
In your tailwind.config I noticed you used the tailwind color names for the colors in your project. You extend the color sets with these new project colors, or in this case, you overwrite some of the tailwind colors. The other color variants like blue-500, blue-800 or gray-500 are still the ones from the tailwind set. This is not really a problem, as long as you are aware of it. If you use these color names directly in the theme, without extending, you overwrite the whole set and the ones you do not include, do not exist. In your that would be blue-800 or gray-500. So you need to be aware tht you do not heve the in between colors.
As to the extra classes you need, I add them on the fly
rounded-[20px]and only extend the set if I use them more than once. If it makes sense to add it to the existing set, I will do that. To use your example, I would addrounded-2.5xl: '1.25rem'to the tailwind set. This will be the same as 20px with default font size settings and will scale with the rest of the site if the default is changed. Naming the 10px one, I would probably go forrounded-0.5xl: '0.625rem'to place it between lg and xl.One of the benefits of using tailwind is not having to name everything. Saves a lot of time. So when I do need it, I tend to stay close to the naming they use.
Happy coding!
Marked as helpful0@ARiYaNSEp0-0Posted 2 months agoThank you so much for your helpful feedback my friend, @wendyhamel
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