DEV Community

Dr Nic Williams
Dr Nic Williams

Posted on

What is my current Tailwind CSS breakpoint?

When you're designing your site and fiddling around with which Tailwind CSS classes should apply starting at each breakpoint, mobile (the default), sm:, md:, and beyond, it can be very handy for your browser to tell you definitively what breakpoint is currently active.

breakpoint-lg

breakpoint-mobile

Create a partial/fragment/component with the following HTML, which uses the sticky z-50 top-2 left-2 classes to ensure your little badge always appears in the top left corner.

<div class="sticky z-50 top-2 left-2 max-w-xs text-gray-900 bg-gray-50">
  <p class="p-2 text-xs">
    Breakpoint:
    <span class="sm:hidden">mobile</span>
    <span class="hidden sm:inline md:hidden">sm</span>
    <span class="hidden md:inline lg:hidden">md</span>
    <span class="hidden lg:inline xl:hidden">lg</span>
    <span class="hidden xl:inline 2xl:hidden">xl</span>
    <span class="hidden 2xl:inline 3xl:hidden">2xl</span>
    <span class="hidden 3xl:inline 4xl:hidden">3xl</span>
    <span class="hidden 4xl:inline">4xl+</span>
  <p>
</div>
Enter fullscreen mode Exit fullscreen mode

Next, in your most outer layout, inject this partial/component when the current page's parameters include dev=1 or similar, near the top of the <body> tag.

For example, in Ruby on Rails you might put the following inside your application.html.erb:

<%= render "shared/sticky_panel" if params[:dev].presence %>
Enter fullscreen mode Exit fullscreen mode

Want to try it out? It's currently live to the public at https://app.rcrdshp.com/?dev=1.

Top comments (1)

Collapse
 
davidteren profile image
David Teren

Nice one Doc. Simple yet useful.