Are you bored to type border: 1px solid red; each time to figure out some elements or to debug them?
Now all you need to just add a class ? at the end of your element's class list, that's it.
Add this tag into your <head> tag
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/gh/YashDDesai/question-mark-css@2.0.0/question-mark.css"
/>
now, just add a class ? at the end of your element's class list
for example:
<div class="h-36 w-36 bg-green-100 ?">
<!-- to-do -->
</div>
Need more colors!
| Border Color | class |
|---|---|
| Red (default) | ? |
| Green | ?g |
| Blue | ?b |
| Purple | ?p |
| Yellow | ?y |
| White | ?w |
Top comments (3)
adding border is not a good idea to debug. You need to use
outline:1px solid redinstead. border will change your layout since it will be considered a part of the element dimension and will affect a lot of stuff like margin collapsing. Outline won't affect your layoutThats a nice litte trick with the '?'. BUt I would also use 'outline' as it is not added to the dimension of the object.
But is there an easy way of adding an outline to ALL components? Or all div, p, table or whatever?
Thanks for your suggestion, I really missed that thing, I'm really grateful to you!