Last active
August 24, 2021 09:25
-
-
Save pil0u/1500c6579980ebe38f8d22f9e36e8b7b to your computer and use it in GitHub Desktop.
Display the current media query breakpoint for Tailwind 2.2.x
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="fixed bottom-0 right-0 p-2 bg-white text-black"> | |
| <span class="mr-1">Current breakpoint:</span> | |
| <span class="font-bold sm:hidden">default (< 640px)</span> | |
| <span class="font-bold hidden sm:inline md:hidden">sm</span> | |
| <span class="font-bold hidden md:inline lg:hidden">md</span> | |
| <span class="font-bold hidden lg:inline xl:hidden">lg</span> | |
| <span class="font-bold hidden xl:inline 2xl:hidden">xl</span> | |
| <span class="font-bold hidden 2xl:inline">2xl</span> | |
| </div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Totally inspired by @jonsugar's gist, just simplified the style and added the
2xldefault breakpoint.To be customised at your will in terms of style, position and custom breakpoints.