React Hook which returns the current TailwindCSS breakpoint size based on the current window width.

useTailwindBreakpoint.js

import { useState, useEffect } from 'react'
import resolveConfig from 'tailwindcss/resolveConfig'
import throttle from 'lodash.throttle'
import tailwindConfig from '../tailwind.config.js'

const findKeyByValue = (object, value) =>
  Object.keys(object).find((key) => object[key] === value)

const getDeviceConfig = (width) => {
  const fullConfig = resolveConfig(tailwindConfig)
  const { screens } = fullConfig.theme

  const bpSizes = Object.keys(screens).map((screenSize) =>
    parseInt(screens[screenSize])
  )

  const bpShapes = bpSizes.map((size, index) => ({
    min: !index ? 0 : bpSizes[index - 1],
    max: size,
    key: findKeyByValue(screens, `${size}px`),
  }))

  let breakpoint = null

  bpShapes.forEach((shape) => {
    if (!shape.min && width < shape.max) {
      breakpoint = shape.key
    } else if (width >= shape.min && width < shape.max) {
      breakpoint = shape.key
    } else if (!shape.max && width >= shape.max) {
      breakpoint = shape.key
    }
  })

  return breakpoint
}

const useTailwindBreakpoint = () => {
  const width = typeof window !== 'undefined' ? window.innerWidth : 0

  const [brkPnt, setBrkPnt] = useState(() => getDeviceConfig(width))

  useEffect(() => {
    const calcInnerWidth = throttle(function () {
      setBrkPnt(getDeviceConfig(width))
    }, 200)
    window.addEventListener('resize', calcInnerWidth)
    return () => window.removeEventListener('resize', calcInnerWidth)
  }, [])

  return brkPnt
}

export default useTailwindBreakpoint

My Nextjs ( and Typescript ) version https://gist.github.com/parkournick00110010/6d88dad60b83dbb30a99c08955b76a98

broken link?

@dnlaviv here is my typescript version, it uses MediaQueryListEvent event instead for the best performance:

import resolveConfig from "tailwindcss/resolveConfig";
import tailwindConfig from "@/tailwind.config";
import { useEffect, useState } from "react";

const fullConfig = resolveConfig(tailwindConfig);
const {
  theme: { screens },
} = fullConfig;
export default (query: keyof typeof screens): boolean => {
  const mediaQuery = `(min-width: ${screens[query]})`;
  const matchQueryList = window.matchMedia(mediaQuery);
  const [isMatch, setMatch] = useState<boolean>(false);
  const onChange = (e: MediaQueryListEvent) => setMatch(e.matches);
  useEffect(() => {
    setMatch(matchQueryList.matches);
    matchQueryList.addEventListener("change", onChange);
    return () => matchQueryList.removeEventListener("change", onChange);
  }, [query]);
  return isMatch;
}

That's much about it.