TheLazy.Dev
Portfolio GitHub

Blog

tailwindcss |elixir |liveview

Debug and visualise TailwindCSS document structure

ndrean

NDREAN

Posted on September 13, 2024

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:

Image description

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>
Enter fullscreen mode Exit fullscreen mode

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";
  }
});
Enter fullscreen mode Exit fullscreen mode

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,
   ^^
   ....
  ]
}
Enter fullscreen mode Exit fullscreen mode
💖 💪 🙅 🚩
ndrean
NDREAN

Posted on September 13, 2024

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

Debug and visualise TailwindCSS document structure
tailwindcss Debug and visualise TailwindCSS document structure

September 13, 2024