Tailwind Breakpoints

A tiny little thing that helps you keep track of your Tailwind breakpoints.

View on GitHub

Prefer Bootstrap?

Always know your breaking point

Supremely simple & really quite useful. Drag your browser in and out to see it working.

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 🤓

Buy me a coffeeBuy me a coffee

Please Share 🤘