TailwindCSS Breakpoint Display

breakpoint_display.jsx

<div className="fixed top-0 pointer-events-none select-none right-[50%] translate-x-1/2 bg-black text-white p-4 z-50">
  <p className="font-semibold block xxs:hidden">Minimum</p>
  <p className="font-semibold hidden xxs:block xs:hidden">XXS</p>
  <p className="font-semibold hidden xs:block sm:hidden">XS</p>
  <p className="font-semibold hidden sm:block md:hidden">SM</p>
  <p className="font-semibold hidden md:block lg:hidden">MD</p>
  <p className="font-semibold hidden lg:block xl:hidden">LG</p>
  <p className="font-semibold hidden xl:block 2xl:hidden">XL</p>
  <p className="font-semibold hidden 2xl:block">2XL</p>
</div>

For XS and XXS, requires in globals.css:

@theme inline {
  --breakpoint-xxs: 20rem;
  --breakpoint-xs: 30rem;
}

(TailwindCSS v4)