The words Under construction in black text on a yellow background with diagonal black stipes surrounding it
I'm in the process of moving my site. It's still a work in progress. Please excuse the mess and broken links.

Tailwind Breakpoint Size Ruler

TODO: Pull subtitle into page object

This snippet of code shows you where Tailwind breakpoints are:

code_start_default_section code_end_default_section

Here's what it looks like.

Debugging Stuff

I'm moving stuff around right now. All this below is helping me figure out where to put stuff

        -- title

Tailwind Breakpoint Size Ruler

-- p

This snippet of code shows you where Tailwind breakpoints are:

-- code/
-- html

<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>

-- /code

-- p

Here's what it looks like.

-- p

<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>


-- categories
-- Miscellaneous

-- metadata
-- date: 2021-05-26 00:00:00
-- id: 20eo3egv
-- status: published
-- type: post
-- SCRUBBED_NEO: false
-- site: aws