Responsive Design
Tags: tailwindcss, react, mobile
Published: 2023-08-31 02:44:01

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](https://tailwindcss.com/), 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!