When you're designing your site and fiddling around with which Tailwind CSS classes should apply starting at each breakpoint, mobile (the default),
md:, and beyond, it can be very handy for your browser to tell you definitively what breakpoint is currently active.
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>
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
For example, in Ruby on Rails you might put the following inside your
<%= render "shared/sticky_panel" if params[:dev].presence %>
Want to try it out? It's currently live to the public at https://app.rcrdshp.com/?dev=1.