Tailwind Development Helpers

tw-helpers.antlers.html

{{ if config.app.env !== 'production' }}
<div class="fixed top-0 left-0 z-50 px-2 py-px text-sm leading-none text-white bg-black rounded-br">
    <span class="inline xxs:hidden xs:hidden sm:hidden md:hidden lg:hidden xl:hidden">none</span>
    <span class="hidden xxs:inline xs:hidden sm:hidden md:hidden lg:hidden xl:hidden">xxs</span>
    <span class="hidden xxs:hidden xs:inline sm:hidden md:hidden lg:hidden xl:hidden">xs</span>
    <span class="hidden xxs:hidden xs:hidden sm:inline md:hidden lg:hidden xl:hidden">sm</span>
    <span class="hidden xxs:hidden xs:hidden sm:hidden md:inline lg:hidden xl:hidden">md</span>
    <span class="hidden xxs:hidden xs:hidden sm:hidden md:hidden lg:inline xl:hidden">lg</span>
    <span class="hidden xxs:hidden xs:hidden sm:hidden md:hidden lg:hidden xl:inline">xl</span>
</div>

<div class="fixed top-0 left-0 z-50 w-full h-screen pointer-events-none">
    <div class="grid grid-cols-12 gap-4 h-full max-w-[1640px] mx-auto">
        <div class="col-span-1 py-8 text-center bg-red-600 opacity-25">1</div>
        <div class="col-span-1 py-8 text-center bg-red-600 opacity-25">2</div>
        <div class="col-span-1 py-8 text-center bg-red-600 opacity-25">3</div>
        <div class="col-span-1 py-8 text-center bg-red-600 opacity-25">4</div>
        <div class="col-span-1 py-8 text-center bg-red-600 opacity-25">5</div>
        <div class="col-span-1 py-8 text-center bg-red-600 opacity-25">6</div>
        <div class="col-span-1 py-8 text-center bg-red-600 opacity-25">7</div>
        <div class="col-span-1 py-8 text-center bg-red-600 opacity-25">8</div>
        <div class="col-span-1 py-8 text-center bg-red-600 opacity-25">9</div>
        <div class="col-span-1 py-8 text-center bg-red-600 opacity-25">10</div>
        <div class="col-span-1 py-8 text-center bg-red-600 opacity-25">11</div>
        <div class="col-span-1 py-8 text-center bg-red-600 opacity-25">12</div>
    </div>
</div>
{{ /if }}