QR code component with TailwindCSS

Community feedback

• 

  Wendy•2,150

  @wendyhamel

  Posted 10 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 add rounded-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 for rounded-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!

  01

  Marked as helpful