This content originally appeared on DEV Community and was authored by DEV Community
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.
This content originally appeared on DEV Community and was authored by DEV Community
DEV Community | Sciencx (2022-03-01T22:56:27+00:00) What is my current Tailwind CSS breakpoint?. Retrieved from https://www.scien.cx/2022/03/01/what-is-my-current-tailwind-css-breakpoint/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.