Tailwind Debug Borders: A Simple Solution for Smarter Debugging

[NicolasSoroka]

Sure, we all do this on a daily basis, but why is there still no class to identify an element? I'm talking, of course, about the one and only
✨1px solid red✨
When we are debugging multiple elements at the same time, we need different colors and, in the end, have to delete all the border and border-color classes that we added... a little bit annoying.

So, a new class like debug-red or debug-[#22d3ee] to identify the debugging ones from the actual useful borders would apply:

• border-2 (better than 1px in my oppinion)
• border-colorOfYourChoice

So... is this really necessary??? You may be thinking...
Well, it's just an improvement. I find myself using these classes a lot, and having this custom solution works really well. Also, this new class can be removed by a linter.

Let me know what you think!

[tryoxiss]

border is in the flow so it will adjust the layout, outline should be used instead as its mostly the same but is outside of the documents flow.

[NicolasSoroka]

Totally agree!