Testing responsive with TailwindCSS

When building out the frontend of your application, TailwindCSS is an excellent choice that balances rapid development and small compiled file sizes. Sure, there are trade offs, but that's up to you to weigh up your choices.

TailwindCSS offers a number of responsive utilities allowing you to quickly alter the styling of the website based on their breakpoints. But how do you know what breakpoint you're currently on? This tiny snippet will tell you exactly where you're at - it should ideally be placed right before the closing body tag.

@if (app()->isLocal())
    <div
        class="pointer-events-none fixed bottom-0 left-0 rounded-tr bg-red-600 p-1 px-2 font-mono leading-none text-white hover:opacity-0"
    >
        <span class="sm:hidden">XS</span>
        <span class="hidden sm:block md:hidden">SM</span>
        <span class="hidden md:block lg:hidden">MD</span>
        <span class="hidden lg:block xl:hidden">LG</span>
        <span class="hidden xl:block 2xl:hidden">XL</span>
        <span class="hidden 2xl:block">2XL</span>
    </div>
@endif

As I'm using Laravel, I've wrapped this in a check to make sure this will only sure on local using Blade - but you can change this as required.

And with that, you've got a tiny tooltip at the bottom left hand corner of your application which shows you the current breakpoint you're on that looks a little like this:

Enjoy!