Skip to content

Instantly share code, notes, and snippets.

@brunocfalcao
Last active December 11, 2020 15:39
Show Gist options
  • Star 3 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save brunocfalcao/fd8981b1c698aa0f4c86346f0ccc1dce to your computer and use it in GitHub Desktop.
Save brunocfalcao/fd8981b1c698aa0f4c86346f0ccc1dce to your computer and use it in GitHub Desktop.
Show the breakpoint name in your tailwind webpage
<div class="bg-red-500 sm:bg-teal-500 md:bg-yellow-500 lg:bg-indigo-500 xl:bg-orange-500 fixed flex items-center inset-0 opacity-75 h-8 w-32 mx-auto z-50">
<div class="text-center block mx-auto sm:hidden md:hidden lg:hidden xl:hidden">DEFAULT</div>
<div class="text-center hidden mx-auto sm:block md:hidden lg:hidden xl:hidden">SM</div>
<div class="text-center hidden mx-auto sm:hidden md:block lg:hidden xl:hidden">MD</div>
<div class="text-center hidden mx-auto sm:hidden md:hidden lg:block xl:hidden">LG</div>
<div class="text-center hidden mx-auto sm:hidden md:hidden lg:hidden xl:block">XL</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment