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 ...