Tailwind CSS Breakpoint Display

breakpoints.md

<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 2xl:hidden">none</span>
    <span class="hidden xxs:inline xs:hidden sm:hidden md:hidden lg:hidden xl:hidden 2xl:hidden">xxs</span>
    <span class="hidden xxs:hidden xs:inline sm:hidden md:hidden lg:hidden xl:hidden 2xl:hidden">xs</span>
    <span class="hidden xxs:hidden xs:hidden sm:inline md:hidden lg:hidden xl:hidden 2xl:hidden">sm</span>
    <span class="hidden xxs:hidden xs:hidden sm:hidden md:inline lg:hidden xl:hidden 2xl:hidden">md</span>
    <span class="hidden xxs:hidden xs:hidden sm:hidden md:hidden lg:inline xl:hidden 2xl:hidden">lg</span>
    <span class="hidden xxs:hidden xs:hidden sm:hidden md:hidden lg:hidden xl:inline 2xl:hidden">xl</span>
    <span class="hidden xxs:hidden xs:hidden sm:hidden md:hidden lg:hidden xl:hidden 2xl:inline">2xl</span>
</div>

tailwind.config.js

//...
  theme: {
    extend: {
      //...
    },
    screens: {
        'xxs': '375px',
        'xs': '480px',
        'sm': '640px',
        'md': '768px',
        'lg': '1024px',
        'xl': '1280px',
        '2xl': '1536px',
    },
  },
//...