Antonio Brandao antoniobrandao
🎯
antoniobrandao
/ breakpoint_display.jsx
Last active
October 1, 2025 15:10
TailwindCSS Breakpoint Display
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |