JSFiddle - React, Tailwind, and code Playground

HTML

<div id="result"></div>

JavaScript

/*
// from bootstrap/scss/_variables.scss
$grid-breakpoints: (
    xs: 0,
    sm: 576px,
    md: 768px,
    lg: 992px,
    xl: 1200px
  ) !default;
*/

const breakpoints = {
    xs: 0,
    sm: 576,
    md: 768,
    lg: 992,
    xl: 1200,
}
const orderedKeys = ['xs', 'sm', 'md', 'lg', 'xl']

const getActiveBreakpoint = () => {
    let breakpoint = ''
    let classList = []

    orderedKeys.some((k, i) => {
        const n = orderedKeys[i + 1]
        let query = ''
        query += `(min-width: ${breakpoints[k]}px)`
        if (n) {
            query += `and (max-width: ${breakpoints[n] - 1}px)`
        }
        if (window.matchMedia(query).matches) {
            breakpoint = k
            classList = [...orderedKeys.slice(0, i).map(b => `gt-${b}`), k, ...orderedKeys.slice(i + 1, orderedKeys.length).map(b => `lt-${b}`)]
            return true
        }
        return false
    })
    return { breakpoint, classList, className: classList.join(' ') }
}


const calculate = () => {
  const result = getActiveBreakpoint()
  document.getElementById('result').innerHTML = `
    breakpoint: ${result.breakpoint}
    <br>
    className: ${result.className}
  `
}

window.addEventListener('resize', calculate)
calculate()