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.
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 <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 %>
Want to try it out? It's currently live to the public at https://app.rcrdshp.com/?dev=1.
Top comments (1)
Nice one Doc. Simple yet useful.