Tailwind Debug Mode [in Phoenix? 🤞]

[nelsonic]

https://github.com/jeroengerits/tailwind-debug-mode

Need to investigate how to add this when using Tailwind with Phoenix given that we don't have a package.json ... how do we add these "plugins" to our build pipeline?

@SimonLab could you please:

• take a look when you're reviewing this repo and
• add a section at the bottom of the README.md on "Debugging".

Thanks! 🙏

[nelsonic]

Having this would be super useful while figuring out the layout in the MVP ... ⏳

[nelsonic]

https://www.npmjs.com/package/tlwdbg

[ndrean]

Just saw this. It is great!

I will use it this (lazy) way:

In "root.html.heex", you add the button,

<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>

and add the JS listener 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 https://github.com/jeroengerits/tailwind-debug-mode/blob/main/src/index.js in the "/assets/js/debug.js" folder,

and modify the "tailwind.config.js" file:

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