Created
December 7, 2020 16:56
-
-
Save adamhopkinson/2cf46cad51d8cbf86f2798308b8edef6 to your computer and use it in GitHub Desktop.
Small TailwindCss component to show which breakpoint is active
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="flex space-x-2 mb-4 rounded border text-center text-sm font-bold"> | |
| <div class="flex-1 p-2"><span class="text-green-700 mr-1 xs:inline-block sm:hidden">✓</span><span class="text-red-700 mr-1 hidden sm:inline-block">✗</span><br>XS</div> | |
| <div class="flex-1 p-2"><span class="text-green-700 mr-1 hidden sm:inline-block md:hidden">✓</span><span class="text-red-700 mr-1 inline-block sm:hidden md:inline-block">✗</span><br>SM</div> | |
| <div class="flex-1 p-2"><span class="text-green-700 mr-1 hidden md:inline-block lg:hidden">✓</span><span class="text-red-700 mr-1 inline-block md:hidden lg:inline-block">✗</span><br>MD</div> | |
| <div class="flex-1 p-2"><span class="text-green-700 mr-1 hidden lg:inline-block xl:hidden">✓</span><span class="text-red-700 mr-1 inline-block lg:hidden xl:inline-block">✗</span><br>LG</div> | |
| <div class="flex-1 p-2"><span class="text-green-700 mr-1 hidden xl:inline-block 2xl:hidden">✓</span><span class="text-red-700 mr-1 inline-block xl:hidden 2xl:inline-block">✗</span><br>XL</div> | |
| <div class="flex-1 p-2"><span class="text-green-700 mr-1 hidden 2xl:inline-block">✓</span><span class="text-red-700 mr-1 inline-block 2xl:hidden">✗</span><br>2XL</div> | |
| </div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Thanks a lot for this, added a check to only display when debug is turned on https://gist.github.com/ssmusoke/2ea299ec632188a491581a62f3d623be