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.