Tailwind example not respecting defaultBreakpoints

[rocketiscool]

When using the tailwind example in Nuxt3, viewport.isLessThan('desktop') returns false rather than true when on mobiles, then when trying to use viewport.breakpointValue('desktop') it returns undefined when debugging with console.log.

The breakpoints are

breakpoints: {
    xs: 320,
    sm: 640,
    md: 768,
    lg: 1024,
    xl: 1280,
    '2xl': 1536,
},

defaultBreakpoints: {
    desktop: 'lg',
    mobile: 'xs',
    tablet: 'md',
},

So when trying to use viewport.isLessThan('desktop') it should work as desktop is mapped to 'lg' but instead only viewport.isLessThan('lg') works

[mvrlin]

Hi, @rocketiscool!

The thing is you can name your breakpoint as you want. Here's the defaults https://github.com/mvrlin/nuxt-viewport/blob/main/src/runtime/manager.ts#L8

When you are passing breakpoints prop to options you are overriding the defaults.

[rocketiscool]

Yes but documentation states that defaultBreakpoints are

An object where the key is the name of the detected device, and the value is the breakpoint key.

I don't want to have to add another breakpoint in breakpoints called desktop: 1024 which is equivalent to "lg" since I'd have a duplicate breakpoint in the array just to be more clear when using functions like viewport.isLessThan('desktop')

[mvrlin]

@rocketiscool defaultBreakpoints is used for fallback when breakpoint cannot be defined. So it's an object where the key is one of the detectable devices and the value is the breakpoint from breakpoints object.

https://github.com/bowser-js/bowser this library is used for the detection.

I actually passed right values in the example.

[rocketiscool]

So, by definition shouldn't viewport.isLessThan('desktop') with that exact config return true when on mobile instead of false? (which is what I'm getting at)

Not sure if I'm confused or not

[mvrlin]

@rocketiscool I think you are 😅. For those methods you need to pass not the device type, but breakpoint key, which has a numerical value assigned.

[rocketiscool]

Okay guess I gotta stick with using lg, xl etc then. Thanks!