Tailwind Breakpoint Helper

Stephen Burke

A simple Tailwind CSS utility to help you develop with confidence with your responsive designs.

Introduction

Have you ever been working on a mobile application and needed to know what the current breakpoint is to accommodate for a design change? Often times, I find myself needing to know what the current breakpoint is so that I can make a design change that is responsive across all devices. It can be a pain to open up the dev tools and check the current breakpoint, especially if you are working on a mobile device. If so, then this Tailwind CSS utility is for you!

What is the Tailwind Breakpoint Helper?

This Tailwind Breakpoint Helper is a simple component that you can add to your project to help you develop with confidence with your responsive designs. It is a small utility that displays the current breakpoint in the bottom left corner of your screen. Of course, with Tailwind you can easily adjust the position and styling of the breakpoint helper to fit your needs.

Code

export const TailwindBreakpointIndicator = () => {
  if (process.env.NODE_ENV === 'production') return null;

  return (
    <div className="fixed bottom-1 left-1 z-[1000] flex h-6 w-6 items-center justify-center rounded-full bg-gray-800 p-3 font-mono text-xs text-white">
      <div className="block sm:hidden">xs</div>
      <div className="hidden sm:block md:hidden">sm</div>
      <div className="hidden md:block lg:hidden">md</div>
      <div className="hidden lg:block xl:hidden">lg</div>
      <div className="hidden xl:block 2xl:hidden">xl</div>
      <div className="hidden 2xl:block">2xl</div>
    </div>
  );
};

Next, include the component at the lowest level of your application so that it is always visible. In this example, I am including the component in the RootLayout component of a Next.js application.

export default function RootLayout({ children }: RootLayoutProps) {
  return (
    <html lang="en">
    <head />
    <body>
      <div>
        <Header />
        <main>{children}</main>
      </div>
      <TailwindBreakpointIndicator />
    </body>
    </html>
  );
}

Now you’ll have a simple utility that displays the current breakpoint in the bottom left corner of your screen. This updates in real-time as you resize your browser window or view your application on different devices!

Thank you for reading! If you enjoyed this post, feel free to share it with your friends and colleagues. For more insights on web development, technology trends, and digital innovation, stay tuned to this blog.
Next:

Why Bitcoin? link