-
We used to have a custom useBreakpoint hook, taking tailwind breakpoint values: import { useMediaQuery } from 'react-responsive'
import defaultTheme from 'tailwindcss/defaultTheme'
const breakpoints = defaultTheme.screens
type BreakpointKey = keyof typeof breakpoints
export function useBreakpoint<K extends BreakpointKey>(breakpointKey: K) {
return useMediaQuery({
query: `(min-width: ${breakpoints[breakpointKey]})`,
})
} I am trying to make it work with tailwind v4, but it seems I got confused with the docs thinking now we have This doesn't work: import { useMediaQuery } from 'react-responsive'
type BreakpointKey = 'sm' | 'md' | 'lg' | 'xl' | '2xl'
export function useBreakpoint(key: BreakpointKey) {
return useMediaQuery({
query: `(min-width: var(--breakpoint-${key}))`,
})
} Is there any way to get access to tailwind breakpoint values? |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 1 reply
-
You can't use CSS variables in CSS media queries, hence why your current implementation does not work. To get the values, as per the documentation:
|
Beta Was this translation helpful? Give feedback.
So it would be
getComputedStyle(document.documentElement).getPropertyValue('--breakpoint-sm')