Make our component's Tailwind class names more understandable in React's HTML

Background

Have you ever seen a long list of class names with barely knowing which components we try to debug?

I cannot deny that Tailwind helps our web development faster, especially, with styling, but when we try to use many of its utility class names within a single element. As a result, we cannot see the actual identity of that component and it may become a guessing game.

One of the solutions is that we can add a unique id …

class components debug development element ever faster hoc html javascript list react styling tailwindcss utility web web development you