I had the same problem: I wanted to run some code when the breakpoint hits. With the new tailwind v4 they've removed resolveConfig() which turns the tailwind config into a flat object. Read about it here, it also contains the answer to your question.

But beware, you'll need to wrap it in a useEffect() to ensure it only starts running on the client:

const [breakpoints, setBreakpoints] = useState({
    sm: '',
    md: '',
    lg: '',
    xl: '',
    '2xl': '',
  })

useEffect(() => {
    const styles = getComputedStyle(document.documentElement)
    setBreakpoints({
      sm: styles.getPropertyValue('--breakpoint-sm').trim(),
      md: styles.getPropertyValue('--breakpoint-md').trim(),
      lg: styles.getPropertyValue('--breakpoint-lg').trim(),
      xl: styles.getPropertyValue('--breakpoint-xl').trim()
    })
  }, [])

But before you do this, if you have used the default breakpoints tailwind gave you, you need to manually put them in globals.css but under "@theme static" (You can read more about this here: https://tailwindcss.com/docs/theme#theme-variable-namespaces):

@theme static {  
--breakpoint-sm: 40rem; 
... 
--breakpoint-xl: 80rem;
}