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

Mobile Device (≥640px)

Resize your browser to see the background change!

'use client';

import { cn } from '@/lib/utils/classnames';

import { useTailwindBreakpoint } from '../use-tailwind-breakpoint';

export default function UseTailwindBreakpointPreview() {
  const sm = useTailwindBreakpoint('sm');
  const md = useTailwindBreakpoint('md');
  const lg = useTailwindBreakpoint('lg');

  const getBackgroundColor = () => {
    if (lg) return 'bg-green-500';
    if (md) return 'bg-yellow-500';
    if (sm) return 'bg-blue-500';
    return 'bg-red-500';
  };

  const getDeviceText = () => {
    if (lg) return 'Desktop Device (≥1024px)';
    if (md) return 'Tablet Device (≥768px)';
    if (sm) return 'Small Device (≥640px)';
    return 'Mobile Device (≥640px)';
  };

  return (
    <div
      className={cn(
        'h-full w-full rounded-xl border border-border p-6 text-black transition-colors duration-300',
        getBackgroundColor()
      )}
    >
      <div className="flex h-full items-center justify-center rounded-lg bg-white/50 p-4">
        <div className="text-center">
          <p className="font-semibold text-gray-800 text-lg">
            {getDeviceText()}
          </p>
          <p className="mt-2 text-gray-600 text-sm">
            Resize your browser to see the background change!
          </p>
        </div>
      </div>
    </div>
  );
}

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