Creating a Responsive Layout

In this lesson, we’ll learn how to use breakpoints to adapt the layout or design of a website or application to different screen sizes.

Responsive design

Responsive design is a cornerstone of modern web development. Fortunately, Tailwind offers flexible utilities for applying media queries with ease.

There are five default responsive utility variants (breakpoints), which are named as follows:

• sm (640 px)

• md (768 px)

• lg (1024 px)

• xl (1280 px)

• 2xl (1536 px)

The unit values in parentheses represent the minimal width option of their applied media query. Each breakpoint variant can be conditionally added to a utility class (by using the [breakpoint]:[utility] pattern) so that the class will take effect only at the specified breakpoint and above. For example, the class md:italic will make text italic only on screens 768 pixels wide and above.

Note: Tailwind uses the mobile-first approach. Unprefixed utilities take effect on all screen sizes, while prefixed utilities only take effect at the specified breakpoint and above.

Sample application

In this lesson, we’ll explore how we can create a responsive component or layout. The component we’re going to create is a responsive header. It’ll have a logo on the left and a menu with links on the right. When the header is resized downward, the menu will disappear, and a “hamburger” menu button will appear instead. To reveal the menu, users will need to click the hamburger icon.