- Published on
Showing your Tailwindcss Responsive Breakpoint
- Authors
- Name
- Steve McNiven
- @stevemcniven
This little utility will render the current breakpoint size you’re on, SUPER handy for responsive development
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
| <!-- TAILWIND CSS RESPONSIVE SIZE --> | |
| <span class="text-xs text-gray-200 tailwind-breaks"> | |
| <span class="inline-block sm:hidden">XS</span> | |
| <span class="hidden sm:inline-block md:hidden">SM</span> | |
| <span class="hidden md:inline-block lg:hidden">MD</span> | |
| <span class="hidden lg:inline-block xl:hidden">LG</span> | |
| <span class="hidden xl:inline-block">XL</span> | |
| </span> |
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
| <!-- BOOTSTRAP 4.6 VERSION --> | |
| <li class="bootstrapsize"> | |
| <span class="d-xs-block d-sm-none d-md-none d-lg-none d-xl-none">XS</span> | |
| <span class="d-none d-sm-block d-md-none d-lg-none d-xl-none">SM</span> | |
| <span class="d-none d-sm-none d-md-block d-lg-none d-xl-none">MD</span> | |
| <span class="d-none d-sm-none d-md-none d-lg-block d-xl-none">LG</span> | |
| <span class="d-none d-sm-none d-md-none d-lg-none d-xl-block">XL</span> | |
| </li> |
You can actually Live-demo it in action down in my footer 👇 Just resize your screen and you’ll see it change!