Skip to content

Instantly share code, notes, and snippets.

@antoniobrandao

antoniobrandao/breakpoint_display.jsx

Last active October 1, 2025 15:10
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save antoniobrandao/f79cb4e82e9eb3d0243f78d7682ce335 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save antoniobrandao/f79cb4e82e9eb3d0243f78d7682ce335 to your computer and use it in GitHub Desktop.
Download ZIP
TailwindCSS Breakpoint Display
Raw
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>
@antoniobrandao
Copy link
Author

antoniobrandao commented Sep 16, 2025 •
edited
Loading

For XS and XXS, requires in globals.css:

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

(TailwindCSS v4)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment