screen.tsx

const ScreenSize = () => {
  const [dimensions, setDimensions] = React.useState({ width: 0, height: 0 });

  React.useEffect(() => {
    function updateDimensions() {
      setDimensions({
        width: window.innerWidth,
        height: window.innerHeight
      });
    }

    updateDimensions();
    window.addEventListener('resize', updateDimensions);

    return () => {
      window.removeEventListener('resize', updateDimensions);
    };
  }, []);

  const { width, height } = dimensions;

  return (
    <div className="fixed bottom-5 left-5 z-50 flex items-center space-x-2 rounded-full bg-black px-2.5 py-1 font-mono text-xs font-medium text-white">
      <span>
        {width.toLocaleString()} x {height.toLocaleString()}
      </span>
      <div className="h-4 w-px bg-gray-800" />
      <span className="sm:hidden">XS</span>
      <span className="hidden sm:inline md:hidden">SM</span>
      <span className="hidden md:inline lg:hidden">MD</span>
      <span className="hidden lg:inline xl:hidden">LG</span>
      <span className="hidden xl:inline 2xl:hidden">XL</span>
      <span className="hidden 2xl:inline">2XL</span>
    </div>
  );
};

I know it doesn't really matter, but you can target a single breakpoint with Tailwind like that:

<span className="sm:hidden">XS</span>
<span className="hidden sm:max-md:inline">SM</span>
<span className="hidden md:max-lg:inline">MD</span>
<span className="hidden lg:max-xl:inline">LG</span>
<span className="hidden xl:max-2xl:inline">XL</span>
<span className="max-2xl:hidden">2XL</span>

Svelte version if you're interested: https://gist.github.com/WarningImHack3r/375c559c5ee120408f9df2390ec2747a