Responsive Design

Using responsive utility variants to build adaptive user interfaces.

Overview

Every utility class in Tailwind can be applied conditionally at different breakpoints, which makes it a piece of cake to build complex responsive interfaces without ever leaving your HTML.

There are four breakpoints by default, inspired by common device resolutions:

  1. /* Small (sm) */
  2. @media (min-width: 640px) { /* ... */ }
  4. /* Medium (md) */
  5. @media (min-width: 768px) { /* ... */ }
  7. /* Large (lg) */
  8. @media (min-width: 1024px) { /* ... */ }
  10. /* Extra Large (xl) */
  11. @media (min-width: 1280px) { /* ... */ }

To add a utility but only have it take effect at a certain breakpoint, all you need to do is prefix the utility with the breakpoint name, followed by the : character:

  1. <!-- Width of 16 by default, 32 on medium screens, and 48 on large screens -->
  2. <img class="w-16 md:w-32 lg:w-48" src="...">

This works for every utility class in the framework, which means you can change literally anything at a given breakpoint — even things like letter spacing or cursor styles.

Here’s a simple example of a marketing page component that uses a stacked layout on small screens, and a side-by-side layout on larger screens (resize your browser to see it in action):

Responsive Design - 图1

  1. <div class="md:flex">
  2.   <div class="md:flex-shrink-0">
  3.     <img class="rounded-lg md:w-56" src="https://images.unsplash.com/photo-1556740738-b6a63e27c4df?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2550&q=80" alt="Woman paying for a purchase">
  4.   </div>
  5.   <div class="mt-4 md:mt-0 md:ml-6">
  6.     <div class="uppercase tracking-wide text-sm text-indigo-600 font-bold">Marketing</div>
  7.     <a href="#" class="block mt-1 text-lg leading-tight font-semibold text-gray-900 hover:underline">Finding customers for your new business</a>
  8.     <p class="mt-2 text-gray-600">Getting a new business off the ground is a lot of hard work. Here are five ideas you can use to find your first customers.</p>
  9.   </div>
  10. </div>

Here’s how the example above works:

  • By default, the outer div is display: block, but by adding the md:flex utility, it becomes display: flex on medium screens and larger.
  • When the parent is a flex container, we want to make sure the image never shrinks, so we’ve added md:flex-shrink-0 to prevent shrinking on medium screens and larger. Technically we could have just used flex-shrink-0 since it would do nothing on smaller screens, but since it only matters on md screens, it’s a good idea to make that clear in the class name.
  • On small screens the image is automatically full width by default. On medium screens and up, we’ve constrained that width to a fixed size using md:w-56.
  • On small screens, the content section uses mt-4 to add some margin between the content and the image. This margin isn’t necessary in the horizontal layout, so we’ve used md:mt-0 to undo that margin, and used md:ml-6 to add some left margin instead.We’ve only used one breakpoint in this example, but you could easily customize this component at other sizes using the sm, lg, or xl responsive prefixes as well.

Mobile First

By default, Tailwind uses a mobile first breakpoint system, similar to what you might be used to in Bootstrap or Foundation.

What this means is that unprefixed utilities (like uppercase) take effect on all screen sizes, while prefixed utilities (like md:uppercase) only take effect at the specified breakpoint and above.

Here’s a simple example that cycles through several background colors at different breakpoints (resize your browser to see the background color change):

Responsive Design - 图2

  1. <div class="bg-red-500 sm:bg-green-500 md:bg-blue-500 lg:bg-pink-500 xl:bg-teal-500"></div>

Throughout the documentation, you’ll often see this interactive widget which we use to quickly demonstrate how some code would look on different screen sizes without forcing you to resize the browser — simply click the device icons at the top to see how the code below would render at that breakpoint:

all

sm

md

lg

xl

  1. <div class="bg-red-500 sm:bg-green-500 md:bg-blue-500 lg:bg-pink-500 xl:bg-teal-500"></div>

Responsive Design - 图3

Examples like this intentionally do not react to changing your browser size. This is by design — it allows even people reading the documentation on smaller screens to preview how some code would look on a desktop display.

Targeting mobile screens

Where this approach surprises people most often is that to style something for mobile, you need to use the unprefixed version of a utility, not the sm: prefixed version. Don’t think of sm: as meaning "on small screens", think of it as "at the small breakpoint".

Responsive Design - 图4Don’t use sm: to target mobile devices

  1. <!-- This will only center text on screens 640px and wider, not on small screens -->
  2. <div class="sm:text-center"></div>

Responsive Design - 图5Use unprefixed utilities to target mobile, and override them at larger breakpoints

  1. <!-- This will center text on mobile, and left align it on screens 640px and wider -->
  2. <div class="text-center sm:text-left"></div>

For this reason, it’s often a good idea to implement the mobile layout for a design first, then layer on any changes that make sense for sm screens, followed by md screens, etc.

Targeting a single breakpoint

Tailwind’s breakpoints only include a min-width and don’t include a max-width, which means any utilities you add at a smaller breakpoint will also be applied at larger breakpoints.

If you’d like to apply a utility at one breakpoint only, the solution is to undo that utility at larger sizes by adding another utility that counteracts it.

Here is an example where the background color is red at the md breakpoint, but teal at every other breakpoint:

all

sm

md

lg

xl

  1. <div class="bg-teal-500 md:bg-red-500 lg:bg-teal-500"></div>

Responsive Design - 图6

Notice that we did not have to specify a background color for the sm breakpoint or the xl breakpoint — you only need to specify when a utility should start taking effect, not when it should stop.

Customizing breakpoints

You can completely customize your breakpoints in your tailwind.config.js file:

  1. // tailwind.config.js
  2. module.exports = {
  3.   theme: {
  4.     screens: {
  5.       'tablet': '640px',
  6.       // => @media (min-width: 640px) { ... }
  8.       'laptop': '1024px',
  9.       // => @media (min-width: 1024px) { ... }
  11.       'desktop': '1280px',
  12.       // => @media (min-width: 1280px) { ... }
  13.     },
  14.   }
  15. }

Learn more in the customizing breakpoints documentation.