DEV Community

Discussion on: Breakpoints reactivity with Tailwind and VueJS

View post
Collapse
 
roelofr profile image
Roelof • • Edited

Thanks for this! I was fairly new to observables so this helped out!

I had one remark though: why the x >= current && x < next statements, when you can just start at the largest breakpoint and descend, skipping the upper bound check on the lower breakpoints.

const getBreakpoint = width => {
  if (width >= screens.xl) return 'xl'
  if (width >= screens.lg) return 'lg'
  if (width >= screens.md) return 'md'
  if (width >= screens.sm) return 'sm'
  return 'all'
}
Enter fullscreen mode Exit fullscreen mode

the result would be the same, but it's a lot shorter and a lot easier to wrap your head around.