Skip to content

Instantly share code, notes, and snippets.

@sitefinitysteve

sitefinitysteve/1-tailwindbreaks.html

Last active September 13, 2024 06:21
Show Gist options
  • Save sitefinitysteve/b4d437518cd795849d99577dc3e618d4 to your computer and use it in GitHub Desktop.
Save sitefinitysteve/b4d437518cd795849d99577dc3e618d4 to your computer and use it in GitHub Desktop.
Download ZIP
Tailwind responsive breakpoint viewer
Raw
1-tailwindbreaks.html
<!-- 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>
Raw
2-bootstrap4.6.html
<!-- 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>
@Dineshs91
Copy link

I've built a free chrome extension Tailwind responsive breakpoint display if anyone is looking to not adding their own code.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment