Created
March 25, 2022 10:09
-
-
Save bpolaszek/7f3a2c2481db7d72a49427df4237b87d to your computer and use it in GitHub Desktop.
Tailwind + Vue3 breakpoint debugger
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Quickly display the current breakpoint name when resizing the window.
Usage in your main component (parent node or
body
must have therelative
class):