Responsive Design

Using responsive utility variants to build adaptive user interfaces.

Work in progress!

More detailed documentation is coming soon, but in the meantime here's a quick class reference.

To Document:

  • Use a better/more realistic example.
  • Explain mobile-first approach in more detail.
  • Explain that unlike what you might be used to with other approaches, in Tailwind a single class never applies different styles at different breakpoints. Instead, you conditionally apply a different class at different breakpoints to get different results.

Tailwind allows you to build responsive designs in the same way you build the rest of your design — using utility classes. Every utility in Tailwind is also available in screen-size specific variations. For example, the .font-bold utility can be used on small screen sizes using the .sm:font-bold class, on medium screen sizes using the .md:font-bold class, on large screen sizes using the .lg:font-bold class and on extra large screen sizes using the .xl:font-bold class.

This is done using predefined screen sizes (media query breakpoints), each of which are given a unique name like sm, md, lg and xl. By default Tailwind takes a "mobile first" approach, where each screen size represents a minimum viewport width. Any classes you apply at smaller screen sizes are also applied to larger sizes, unless of course you override them, which is the whole point! This approach, while simple, is actually very powerful and can be used to build complex, beautiful, responsive designs.

Responsive example

Tailwind
Tailwind
Tailwind
Tailwind
Tailwind