Note: This site is currently "Under construction". I'm migrating to a new version of my site building software. Lots of things are in a state of disrepair as a result (for example, footnote links aren't working). It's all part of the process of building in public. Most things should still be readable though.

Tailwind Breakpoint Size Ruler

This snippet of code shows you where Tailwind breakpoints are:

Code

<div class="bg-yellow-300 sm:bg-green-700
md:bg-red-400 lg:bg-purple-600 
xl:bg-blue-400 2xl:bg-gray-500 
">
    <div class="block sm:hidden">Less than small</div>
    <div class="hidden sm:block md:hidden">Small (sm)</div>
    <div class="hidden md:block lg:hidden">Medium (md)</div>
    <div class="hidden lg:block xl:hidden">Large (lg)</div>
    <div class="hidden xl:block 2xl:hidden">Extra Large (xl)</div>
    <div class="hidden 2xl:block">2 Extra Large (2xl)</div>
</div>

Here's what it looks like.