Responsive Designs

Creating and testing your designs for all screen sizes.

When using Tailwind CSS, it is easy to make your pages adjust to various screen sizes. Every Tailwind class can be prefixed with a size breakpoint, which determines the class that should be applied.

On mobile, this text is small with a blue background.

<p className="text-sm sm:text-base bg-sky-400 sm:bg-indigo-400 text-white p-4 rounded-md">
  On mobile, this text is small with a blue background.
</p>

Breakpoints

The following size breakpoints are supported. Additional breakpoints can be definted in the Tailwind configuration.

Prefix

Min. width

CSS

sm640px@media (min-width: 640px) {...}
md768px@media (min-width: 768px) {...}
lg1024px@media (min-width: 1024px) {...}
xl1280px@media (min-width: 1280px) {...}
2xl1536px@media (min-width: 1536px) {...}

To tell a class to only take effect at a given breakpoint, prefix the class with the breakpoint followed by :. For instance:

<p class="text-xs md:text-lg xl:text-2xl">Hello responsive text!</p>

These prefixes work for any Tailwind CSS class, which makes it very convenient to easily create pages and layouts that adapt their behavior depending on the screen size.

Unprefixed classes (like text-red-500) take effect on all screen sizes, while prefixed classes (like sm:text-purple-500) take effect at the specified breakpoint and above. So for instance, the class specification text-red-500 sm:text-purple-500 indicates that on small screens (smaller than 640 pixels in width), the text should be red-500; on screens larger than small (larger than or equal to 640 pixels in width), the text should be purple-500.

Example

Try to resize the window to see how the layout adapts at various screen sizes.

On top of the hills

Blog post

On top of the hills

This is my travel blog. My passion is trecking, and I've spent the last 10 years of my climbing to hilltops. Himalayas, Alps, Appalachians, Andes, I did them all.

<div class="mx-auto bg-white rounded-lg shadow-lg overflow-hidden max-w-md md:max-w-2xl my-8">
  <div class="md:flex">
    <div class="md:flex-shrink-0">
      <img
        class="h-full w-full object-cover md:w-48 m-0"
        src="https://res.cloudinary.com/djp21wtxm/image/upload/v1613233182/yjwgn8hr0yjl0xay6thu.png"
        alt="On top of the hills"
      />
    </div>
    <div class="px-8 pt-8 pb-2">
      <div class="uppercase tracking-wide text-sm text-cyan-500 font-semibold">
        Blog post
      </div>
      <a
        href="#"
        class="block mt-1 mb-4 text-lg leading-tight font-medium text-black no-underline hover:underline"
      >
        On top of the hills
      </a>
      <p class="mt-2 text-gray-600 text-sm">
        This is my travel blog. My passion is trecking, and I've spent the last
        10 years of my climbing to hilltops. Himalayas, Alps, Appalachians,
        Andes, I did them all.
      </p>
    </div>
  </div>
</div>

Here is what is happening:

  • By default, the card has max width max-w-md, but on medium screens and larger, it becomes max-w-2xl.
  • By default, the card is display: block, but on medium screens and larger, it becomes display: flex.
  • By default, the image is full width, but on medium screens and larger, it becomes w-48.

Previewing your page at various sizes

In order to preview how your page looks at various screen sizes, open the page options menu and select Show responsive preview.

Choose your preview device type (mobile, tablet or desktop), or drag the side and corner handles for a custom layout.

Copyright © 2022 Motif Land Inc. All rights reserved. This website is built with Motif.