Breakpoint Viewer
A helpful devtool that shows which breakpoint you are currently on.
breakpoint-viewer.tsx
tsx1export function BreakpointViewer() { 2 return ( 3 <div 4 title="Current breakpoint" 5 className="fixed bottom-3 left-24 z-50 rounded-md bg-primary p-1.5 px-2 text-primary-foreground" 6 > 7 <span className="inline-block sm:hidden">XS</span> 8 <span className="hidden sm:inline-block md:hidden">SM</span> 9 <span className="hidden md:inline-block lg:hidden">MD</span> 10 <span className="hidden lg:inline-block xl:hidden">LG</span> 11 <span className="hidden xl:inline-block 2xl:hidden">XL</span> 12 <span className="hidden 2xl:inline-block">2XL</span> 13 </div> 14 ); 15}
Usage
tsx1// layout.tsx or your project index file 2 3export default function RootLayout({ 4 children, 5}: Readonly<{ 6 children: React.ReactNode; 7}>) { 8 return ( 9 <html lang="en"> 10 <body> 11 {children} 12 {process.env.NODE_ENV === "development" && ( 13 <BreakpointViewer /> 14 )} 15 </body> 16 </html> 17 ); 18}