Debug and visualise TailwindCSS document structure

Thanks to this repo: https://github.com/jeroengerits/tailwind-debug-mode, you can visualise the document structure more easily.

We illustrate the usage of the plugin with a Phoenix_LiveView app. It will display the default landing page as below:

Setup

Add a button in the layout file "root.html.heex":

<button
  id="tailwind-debug"
  style="
    padding: 0.3rem 1.2rem !important;
    font-weight: bold;
    border-radius: 1rem;
    background-color: #cceecc !important;
    color: black !important;
    "
  >
  TOGGLE DEBUG MODE
</button>

Add a JS listener on this button in "/assets/app.js":

document.getElementById("tailwind-debug").addEventListener("click", () => {
  if (document.body.className.includes("debug")) {
    document.body.className = document.body.className.replace("debug", "");
  } else {
    document.body.className += " debug";
  }
});

Copy/paste the file https://github.com/jeroengerits/tailwind-debug-mode/blob/main/src/index.js in the "/assets/js" folder,

Modify the "tailwind.config.js" file:

import debug from "./js/debug";
  ^^
...
module.exports = {
  plugins: [
    require("@tailwindcss/forms"),
    debug,
   ^^
   ....
  ]
}