A tiny little thing that helps you keep track of your Tailwind breakpoints.
Just copy the markup below into the body of any pages you’re working on and you’ll always know what break point you’re in.
<div class="fixed z-50 text-xs font-bold text-black p-2">
<span class="sm:hidden rounded px-1 bg-yellow-400 p-1">XS</span>
<span class="hidden sm:inline-block md:hidden rounded px-1 bg-yellow-400">SM</span>
<span class="hidden sm:hidden md:inline-block lg:hidden rounded px-1 bg-yellow-400">MD</span>
<span class="hidden lg:inline-block xl:hidden rounded px-1 bg-yellow-400">LG</span>
<span class="hidden xl:inline-block rounded px-1 bg-yellow-400">XL</span>
</div>
Or paste the CDN link into the <body> of your pages
<script src="https://awesomecdn.netlify.app/tw.js"></script>
If you found this helpful, I appreciate coffee 🤓
Please Share 🤘