Tailwind Screen Widths and Breakpoints

Overview

All the examples we have seen so far in this course have one thing in common. They are not designed to look good on smaller screens, like smartphones or tablets. The process of making a CSS design that works on multiple-sized screens is called responsive design.

In plain CSS, responsive design can be a complicated tangle of CSS classes and the @media tags. Tailwind provides prefixes that can be applied to any Tailwind utility to control the set of screen sizes.

The complexity of responsive design

Tailwind does not take away all the complexity of the responsive design. We still need to consider many factors when designing for multiple sizes. For example, we need to think about which elements of our site are most important and need to be emphasized when the user is looking at a smaller screen. Tailwind makes it easier to experiment with different designs at different sizes and to be able to see all the different size designs at a glance. That said, responsive design in Tailwind can lead to extremely long CSS class declarations that can be hard to read.

In this chapter, we’ll take a look at the responsive utilities in Tailwind as well as common patterns for applying them.

Important behaviors

In CSS, various properties may be applied conditionally based on the width of the screen. These conditions are managed with the @media tag. The specific screen widths at which the design changes are called breakpoints. In Tailwind, we can put a prefix on any Tailwind utility to specify the minimum screen width where that utility should be applied. But Tailwind behaves a little differently than other responsive frameworks. Some important behaviors to note include the following:

• Any responsive prefix causes the utility to take effect at the specified screen width or any larger screen width.
• Tailwind utilities define a minimum width to take effect but not a maximum width.
• If no prefix is used, the default minimum width is 0—the utility is always in effect.

If we define something as being for small screen widths, Tailwind applies that behavior up to small, medium, large, and beyond. If we want behavior only on small screens, we define the small-screen behavior without a prefix and the canceling behavior with a mid-screen or wide-screen prefix.

Five screen widths

Tailwind defines fivescreen widths by default. For these fivescreen widths, the pixel width is the logical width of the screen. On a device with a retina screen, where a logical pixel would be made up of more than one physical pixel, we still use the logical screen. For example, the iPhone 12 is 390 logical pixels wide, even though it’s 1170 physical pixels wide.

The fivescreen widths are below:

• Small (sm:)—640 pixels and up
• Medium (md:)—768 pixels and up
• Large (lg:)—1024 pixels and up
• Extra large (xl:)—1280 pixels and up
• Extra extra large (2xl:)—1536 pixels and up

The following table offers a partial list of existing device widths: