Responsive Design

We all know that feeling after building a website; it's completed and deployed, and then you open it on your phone and the whole thing is distorted.

I recently completed a project with Tailwind CSS, a mobile-first responsive design CSS framework that helped me to navigate mobile design using breakpoints.

The Concept

Each breakpoint, five in total, represents a common screen size from small (sm) to 2xl. Using these, you can conditionally render utility classes for each breakpoint.

For example, say you have a header with some text.

<h1>Welcome</h1> 

Using Tailwind utility classes we can specify some styling like font size and color.

<h1 className='text-blue text-xl'>Welcome</h1>

Next, we can add multiple utility classes for specific breakpoints.

<h1 className='text-blue text-xl sm:text-2xl lg:text-4xl'>Welcome</h1>

The breakpoint system for Tailwind CSS is mobile-first. This means that the unspecified utilities default to a mobile device (text-xl in the example above). You should think of the "sm" breakpoint as the breakpoint ABOVE the smallest. The way to target a mobile device is by not adding a prefix to your utility class.

How to Apply

When applied to text size, it's very intuitive to understand. Let's take a look at how to apply to a situation with a grid to gain a further understanding.

We'll start with a basic grid.

<div className='grid gap-12 m-6'> ... </div>

Remember that Tailwind is mobile-first. Depending on content and margins, a three column grid is likely to get distorted on a small screen. We'll start with a single column default for mobile, then specify other major breakpoints.

<div className='grid md:grid-cols-2 lg:grid-cols-3 gap-12 m-6 md:m-12'> ... </div>

Notice, I also adjusted the margin as screen size goes up. If you don't specify a specific breakpoint it will default to the next breakpoint below. In this example the breakpoints xs (no prefix) and sm will have a margin of 6. Breakpoints md, lg, xl, 2xl will all have a margin of 12.

Conditional Rendering with Breakpoints

Apart from resizing text and a grid layout, you can also choose to hide specific elements completely. In this example, I'll talk about reformatting a navigation panel from a navbar to a dropdown menu.

Here I'm using the utility class hidden as a default (mobile-first) for the navbar. At the medium breakpoint I'll add display as block.

 <nav className='hidden w-full md:block md:w-auto space-x-10'>
   <button>Home</button>
   <button>Notifications</button>
   <button>Settings</button>
</nav>

Next I'll define a menu dropdown button with the breakpoint md:hidden.

<button onClick={() => setIsOpen(!isOpen)} className="block justify-right p-2 w-10 h-10 hover:text-white md:hidden">Menu</button>

This setup allows for the navigation panel to switch at the medium breakpoint from a navbar to a dropdown menu. As one element is hidden, the other will take its place. This prevents a warped user experience on mobile but adds a fuller design/layout to a larger screen.

Try It Out!

I find it best to learn through trial an error so open up a text editor and try it out. Tailwind makes it pretty easy to get the hang of and it's really exciting to watch the browser adapt.

Happy coding!