Tailwind + Vue3 breakpoint debugger

DebugBreakpoint.vue

<template>
  <div v-if="show" class="absolute inset-0 h-screen w-screen bg-white bg-opacity-75 text-black z-500 flex items-center overflow-hidden">
    <div class="mx-auto text-5xl uppercase">{{ currentBreakpoint }}</div>
  </div>
</template>

<script setup>
import { refAutoReset, useMediaQuery } from '@vueuse/core';
import { computed, reactive, watch } from 'vue';

const breakpoints = {
  xs: 0,
  sm: 640,
  md: 768,
  lg: 1024,
  xl: 1280,
  '2xl': 1536,
};

const useCurrentBreakpoint = () => {
  const matchingBreakpoints = reactive({});
  for (const breakpoint in breakpoints) {
    const valueInPixels = breakpoints[breakpoint];
    matchingBreakpoints[breakpoint] = useMediaQuery(`(min-width: ${valueInPixels}px)`);
  }
  return computed(() => {
    const entries = Object.entries(matchingBreakpoints).filter(([key, value]) => value);
    return Object.keys(Object.fromEntries(entries))[entries.length - 1];
  });
};

const show = refAutoReset(false, 200);
const currentBreakpoint = useCurrentBreakpoint();
watch(currentBreakpoint, () => show.value = true);
</script>

Quickly display the current breakpoint name when resizing the window.

Usage in your main component (parent node or body must have the relative class):

<template>
  <div class="relative">
    <DebugBreakpoint v-if="IS_DEV_MODE" />
    <RouterView />
  </div>
</template>

<script setup>
const IS_DEV_MODE = import?.meta?.env?.DEV || 'development' === process?.env?.NODE_ENV;
</script>