DEV Community

Cover image for Debug and visualise TailwindCSS document structure
NDREAN
NDREAN

Posted on

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

Image of Datadog

Create and maintain end-to-end frontend tests

Learn best practices on creating frontend tests, testing on-premise apps, integrating tests into your CI/CD pipeline, and using Datadog’s testing tunnel.

Download The Guide

Top comments (0)

Image of Datadog

Create and maintain end-to-end frontend tests

Learn best practices on creating frontend tests, testing on-premise apps, integrating tests into your CI/CD pipeline, and using Datadog’s testing tunnel.

Download The Guide

👋 Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay