CSS viewport debug for Tailwind CSS

debug.blade.php

@if(env('CSS_DEBUG'))
    <div class="fixed pin-b pin-l text-white opacity-50">
        <span class="absolute pin-b pin-l bg-red p-4 sm:hidden md:hidden lg:hidden xl:hidden">Mobile</span>
        <span class="absolute pin-b pin-l bg-orange p-4 hidden sm:block md:hidden lg:hidden xl:hidden">Small</span>
        <span class="absolute pin-b pin-l bg-green p-4 hidden sm:hidden md:block lg:hidden xl:hidden">Medium</span>
        <span class="absolute pin-b pin-l bg-blue p-4 hidden sm:hidden md:hidden lg:block xl:hidden">Large</span>
        <span class="absolute pin-b pin-l bg-purple p-4 hidden sm:hidden md:hidden lg:hidden xl:block"><nobr>X-Large</nobr></span>
    </div>
@endif