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,
^^
....
]
}
Top comments (0)