useTailwindBreakpoint

A hook for observing breakpoints using Tailwind CSS breakpoints and custom media queries

Source Code

"use client";
 
import theme from "tailwindcss/defaultTheme";
import { useMatchMedia } from "../use-match-media";
 
const breakpoints = theme?.screens as Record<string, string>;
 
type Breakpoint = keyof typeof breakpoints;
 
export const useTailwindBreakpoint = (breakpoint: Breakpoint) => {
  const query = breakpoints[breakpoint];
  return useMatchMedia(`(min-width: ${query})`);
};

Features

Tailwind Integration: Uses tailwindcss breakpoints from the default config
SSR Compatible: Works seamlessly with server-side rendering

API Reference

useTailwindBreakpoint

Prop	Default	Type	Description
`breakpoint`	-	`Breakpoint`	The Tailwind CSS breakpoint to observe.

Note: The actual available breakpoints depend on your Tailwind configuration. If you have custom screen tokens defined in your theme, those will also be available.

Examples

Basic Usage

Best Practices

Breakpoint Consistency:
- Use useTailwindBreakpoint with Tailwind breakpoint names for consistency with your CSS
Separation of Concerns:
- Use Tailwind classes for visual responsive design
- Use the hook for JS logics, state management, and conditional rendering

useStableCallback

useTicker