A small module to show the current Window information and the media query state of TailwindCSS in your current project.
- Import both files into a folder in your project.
- For the tailwind-debugger.css import it in on top of your global file :
@import url("tailwind-debugger.css");
- Now you can import tailwind-debugger.js directly into the html file at the end of the
<body>
tag
<script type="module" src="/tailwind-debugger.js"></script>
</body>
Please remember to add the
type="module"
in the script
- At this point simply create a div inside the
<body>
and add"data-debugger"
as an attribute:
<div data-debugger></div>
If you're interested in contributing to Tailwind CSS Debugger, I will be more than happy.