Tip #29: Debug your CSS with a ??? utility

In JavaScript we can easily debug our code using console.log.

Unfortunately, we don't have a console.log function in CSS, but that doesn't mean we can't build something with a similar functionality.

In a few projects, I've used something called a ??? utility. It's a class that you can throw onto any element and what it does is create an outline around that element and its children so you can see the box-model for that element.

Here's an example of that in action:

I encourage you to build your own ??? utility rather than use a plugin. That way, you can customize it to your liking (it's also really easy to build).

If you want to use mine, just add this to your CSS file where you also call the TailwindCSS preflight directives:

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities{
  .\?\?\? > *{
    @apply outline outline-2 outline-red-500/75;
  }
}

Note that \?\?\? in CSS is an escape string for ???.