This hook is quite similar to regular old media queries in css, but has the capability to conditionally render components or map to component props in TypeScript.
Simply supply this hook with a set of widths to monitor (in pixels) and the hook will return boolean matches of the supplied values.
Set a custom throttle reporting time:
Mezz can be used with Tailwind CSS to match the same breakpoints you’ve defined in your tailwind config.
First, we need to extract and export the screens object from tailwind.config.ts. You’ll need to define your screens in the below format:
Next we create a provider and use the screens object to generate the breakpoint config:
Next, wrap your app with the BreakpointProvider above.
Then use your tailwind body width context like this: