Skip to content

Instantly share code, notes, and snippets.

@sitefinitysteve

sitefinitysteve/1-tailwindbreaks.html

Last active May 15, 2023 08:39
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • 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>
@semoal
Copy link

semoal commented May 15, 2023 •
edited

Version that it's shown floating and you can scroll and see the responsive size, also added 2XL breakpoint.

React version

<div className="sticky z-50 top-0 text-2xl text-white flex items-center justify-center rounded-full bg-yellow-400 font-semibold w-32 h-32">
        <span className="inline-block sm:hidden">XS</span>
        <span className="hidden sm:inline-block md:hidden">SM</span>
        <span className="hidden md:inline-block lg:hidden">MD</span>
        <span className="hidden lg:inline-block xl:hidden">LG</span>
        <span className="hidden xl:inline-block">XL</span>
        <span className="hidden 2xl:inline-block">2XL</span>
      </div>

If you're using html, just replace className by class

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