Forked from adamhopkinson/showbreakpoints.blade.php
Last active
December 13, 2020 20:33
-
-
Save ssmusoke/2ea299ec632188a491581a62f3d623be to your computer and use it in GitHub Desktop.
Small TailwindCss component to show which breakpoint is active based on the debug mode
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
| @if (config('app.debug')) | |
| <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> | |
| @endif |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment