Modern CSS with Tailwind, 2nd Edition

Flex on Larger Devices

Another way to adjust between sizes is to have an element use default block spacing on smaller devices and then convert to flex spacing on larger devices. The block spacing on small devices ensures that the items stay in a column, even if some of them are narrow, while the flex spacing at a larger size spreads them out in a row.

The common pattern here is a navigation bar that’s spread over the top of the page at a larger size. But at a smaller size, it’s a menu column, generally hidden until the menu button is clicked.

Here’s a simple example:

<div class="w-full hidden lg:flex lg:flex-grow, lg:items-center lg:width-auto
     divide-black divide-y lg:divide-y-0"
     id="navbar-menu">
 <a class="block lg:mr-4 p-2 hover:bg-gray-200">Blog</a> ...