Breakpoint.vue 593 B

12345678910
  1. <template>
  2. <div class="flex items-center m-2 fixed bottom-0 right-0 border border-gray-400 rounded p-2 bg-gray-300 text-pink-600 text-sm">
  3. Current breakpoint
  4. <span class="ml-1 sm:hidden md:hidden lg:hidden xl:hidden">default (&lt; 640px)</span>
  5. <span class="ml-1 hidden sm:inline md:hidden font-extrabold">sm</span>
  6. <span class="ml-1 hidden md:inline lg:hidden font-extrabold">md</span>
  7. <span class="ml-1 hidden lg:inline xl:hidden font-extrabold">lg</span>
  8. <span class="ml-1 hidden xl:inline font-extrabold">xl</span>
  9. </div>
  10. </template>