0
0
Tailwindmarkup~5 mins

Max-width responsive variants in Tailwind

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

Max-width responsive variants help you control how wide elements can get on different screen sizes. This keeps your design neat and easy to read on phones, tablets, and desktops.

You want an image or box to never get wider than a certain size on big screens.
You want text content to stay readable by limiting its width on large monitors.
You want a container to adjust its max width depending on the device screen size.
You want to create a layout that looks good on both mobile and desktop without extra code.
You want to prevent elements from stretching too wide on very large screens.
Syntax
Tailwind
max-w-{size}
sm:max-w-{size}
md:max-w-{size}
lg:max-w-{size}
xl:max-w-{size}
2xl:max-w-{size}

Replace {size} with Tailwind's predefined max-width sizes like xs, sm, md, lg, xl, 2xl, full, min, max, or custom values.

Prefix with screen size like sm: or lg: to apply max-width only on that screen size and up.

Examples
Sets max-width to medium size on all screen sizes.
Tailwind
max-w-md
Sets max-width to large only on small screens and bigger (≥640px).
Tailwind
sm:max-w-lg
Sets max-width to extra large only on medium screens and bigger (≥768px).
Tailwind
md:max-w-xl
Sets max-width to 2xl only on large screens and bigger (≥1024px).
Tailwind
lg:max-w-2xl
Sample Program

This example creates a white box centered on the page with padding and border. The box's maximum width changes as the screen gets bigger:

  • max-w-sm on very small screens
  • sm:max-w-md on small screens and up
  • md:max-w-lg on medium screens and up
  • lg:max-w-xl on large screens and up

This keeps the box from getting too wide on small devices but allows it to grow on bigger screens.

Tailwind
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Max-width Responsive Variants Example</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 p-6">
  <main class="mx-auto bg-white p-4 border rounded max-w-sm sm:max-w-md md:max-w-lg lg:max-w-xl">
    <h1 class="text-xl font-bold mb-2">Responsive Max-Width Box</h1>
    <p>This box changes its maximum width depending on your screen size.</p>
    <p>Resize the browser window to see it get wider on bigger screens.</p>
  </main>
</body>
</html>
OutputSuccess
Important Notes

Use max-w-full if you want the element to never be wider than its container.

Combine max-width with padding and margin to keep content nicely spaced.

Test your design by resizing the browser or using browser DevTools device simulator.

Summary

Max-width responsive variants control how wide elements can be on different screen sizes.

Use prefixes like sm:, md:, lg: to apply max-width at specific breakpoints.

This helps keep your layout clean and readable on all devices.