Browser Support
Flex Direction
Flex Wrap
Justify Items
Justify Self
Menu

Tailwind CSS Max-Width

The max-width property is used to constrain the maximum width of an element. It ensures that an element does not exceed a given width, even if its content or parent container would ordinarily make it larger.

Tailwind CSS simplifies this process by providing an extensive set of utility classes for setting max-widths, enabling developers to customize their layouts effortlessly. Let's learn how to work with max-width in Tailwind:

ClassPropertiesExample
max-w-0max-width: 0px;<div className="max-w-0"></div>
max-w-pxmax-width: 1px;<div className="max-w-px"></div>
max-w-0.5max-width: 0.125rem; <div className="max-w-0.5"></div>
max-w-1max-width: 0.25rem; <div className="max-w-1"></div>
max-w-1.5max-width: 0.375rem; <div className="max-w-1.5"></div>
max-w-2max-width: 0.5rem; <div className="max-w-2"></div>
max-w-2.5max-width: 0.625rem; <div className="max-w-2.5"></div>
max-w-3max-width: 0.75rem; <div className="max-w-3"></div>
max-w-3.5max-width: 0.875rem; <div className="max-w-3.5"></div>
max-w-4max-width: 1rem; <div className="max-w-4"></div>
max-w-5max-width: 1.25rem; <div className="max-w-5"></div>
max-w-6max-width: 1.5rem; <div className="max-w-6"></div>
max-w-7max-width: 1.75rem; <div className="max-w-7"></div>
max-w-8max-width: 2rem; <div className="max-w-8"></div>
max-w-9max-width: 2.25rem; <div className="max-w-9"></div>
max-w-10max-width: 2.5rem; <div className="max-w-10"></div>
max-w-11max-width: 2.75rem; <div className="max-w-11"></div>
max-w-12max-width: 3rem; <div className="max-w-12"></div>
max-w-14max-width: 3.5rem; <div className="max-w-14"></div>
max-w-16max-width: 4rem; <div className="max-w-16"></div>
max-w-20max-width: 5rem; <div className="max-w-20"></div>
max-w-24max-width: 6rem; <div className="max-w-24"></div>
max-w-28max-width: 7rem; <div className="max-w-28"></div>
max-w-32max-width: 8rem; <div className="max-w-32"></div>
max-w-36max-width: 9rem; <div className="max-w-36"></div>
max-w-40max-width: 10rem; <div className="max-w-40"></div>
max-w-44max-width: 11rem; <div className="max-w-44"></div>
max-w-48max-width: 12rem; <div className="max-w-48"></div>
max-w-52max-width: 13rem; <div className="max-w-52"></div>
max-w-56max-width: 14rem; <div className="max-w-56"></div>
max-w-60max-width: 15rem; <div className="max-w-60"></div>
max-w-64max-width: 16rem; <div className="max-w-64"></div>
max-w-72max-width: 18rem; <div className="max-w-72"></div>
max-w-80max-width: 20rem; <div className="max-w-80"></div>
max-w-96max-width: 24rem; <div className="max-w-96"></div>
max-w-nonemax-width: none;<div className="max-w-none"></div>
max-w-xsmax-width: 20rem; <div className="max-w-xs"></div>
max-w-smmax-width: 24rem; <div className="max-w-sm"></div>
max-w-mdmax-width: 28rem; <div className="max-w-md"></div>
max-w-lgmax-width: 32rem; <div className="max-w-lg"></div>
max-w-xlmax-width: 36rem; <div className="max-w-xl"></div>
max-w-2xlmax-width: 42rem; <div className="max-w-2xl"></div>
max-w-3xlmax-width: 48rem; <div className="max-w-3xl"></div>
max-w-4xlmax-width: 56rem; <div className="max-w-4xl"></div>
max-w-5xlmax-width: 64rem; <div className="max-w-5xl"></div>
max-w-6xlmax-width: 72rem; <div className="max-w-6xl"></div>
max-w-7xlmax-width: 80rem; <div className="max-w-7xl"></div>
max-w-fullmax-width: 100%;<div className="max-w-full"></div>
max-w-minmax-width: min-content;<div className="max-w-min"></div>
max-w-maxmax-width: max-content;<div className="max-w-max"></div>
max-w-fitmax-width: fit-content;<div className="max-w-fit"></div>
max-w-prosemax-width: 65ch;<div className="max-w-prose"></div>
max-w-screen-smmax-width: 640px;<div className="max-w-screen-sm"></div>
max-w-screen-mdmax-width: 768px;<div className="max-w-screen-md"></div>
max-w-screen-lgmax-width: 1024px;<div className="max-w-screen-lg"></div>
max-w-screen-xlmax-width: 1280px;<div className="max-w-screen-xl"></div>
max-w-screen-2xlmax-width: 1536px;<div className="max-w-screen-2xl"></div>

Overview of Max-Width

Adding Max-Width

When defining the max-width for general content layout, Tailwind allows you to quickly implement constraints for readability and aesthetics.

This is a live editor. Play around with it!
export default function ContentWidth() {
  return (
    <div className="bg-gray-100 w-screen h-screen flex items-center justify-center">
      <div className="max-w-72 p-4 bg-white shadow-lg rounded-lg">
        <img 
          className="w-full rounded-t-lg" 
          src="https://images.unsplash.com/photo-1511467687858-23d96c32e4ae" 
          alt="Sample Image"
        />
        <h2 className="text-xl font-semibold mt-2">Tailwind Utility: Max-Width</h2>
        <p className="text-gray-700">
          This container is limited to the maximum width of 'lg', ensuring its content  
          remains easy to read across different screen sizes.
        </p>
      </div>
    </div>
  );
}

{/*
CSS Notes:

- max-w-72: Maximum width set to 18rem.
  */}

Managing Large Elements

Apart from the numbered scale, Tailwind also has a named scale for max widths on and above 20rem. These utilities comes in handy while managing large elements since numbered scale stops at 24rem. These utilities are max-w-xs, max-w-sm, max-w-md, and so on.

This is a live editor. Play around with it!
export default function LargeImage() {
  return (
    <div className="bg-gray-50 w-screen h-screen flex justify-center items-center">
      <div className="max-w-xs">
        <img 
          className="w-full rounded-md shadow-md" 
          src="https://images.unsplash.com/photo-1511467687858-23d96c32e4ae" 
          alt="Large Asset"
        />
      </div>
    </div>
  );
}

{/*
CSS Notes:

- max-w-xs: Constrain the maximum width to 20rem.
  */}

Adding Reading Width

Ensuring readable text width is crucial for user experience. By applying max-w-prose, you can ensure optimum reading width for your content that also adapts as per the font size.

This is a live editor. Play around with it!
export default function ReadableText() {
  return (
    <div className="bg-gray-200 w-screen h-screen flex items-center justify-center">
      <div className="max-w-prose text-gray-800 p-6 font-serif bg-white rounded-lg shadow-md">
        <h1 className="text-3xl font-bold mb-4">Readable Text Width</h1>
        <p>
          A maximum width of 'prose' applies ideal constraints for text-heavy content, 
          ensuring optimal readability and alignment for paragraphs. Tailwind provides 
          utilities suited for modern typography.
        </p>
      </div>
    </div>
  );
}

{/*
CSS Notes:

- max-w-prose: Enforces readability for typographic content.
- p-6: Adds padding to create spacing within the container.
  */}

Such constraints are especially useful for blogs, articles, or publication sites.

Adding Breakpoints-Based Max-Width

Tailwind's max-w-screen-* utilities give the element max width based on breakpoints. For example, max-w-screen-sm will give 640px max-width. Similarly, max-w-screen-lg will give 1024px max width to the element.

This is a live editor. Play around with it!
export default function ResponsiveMaxWidth() {
  return (
    <div className="flex items-center justify-center h-screen w-screen bg-gray-100">
      <div className="max-w-screen-sm bg-white p-5 rounded-lg shadow">
        <h1 className="text-2xl">Max Screen Widths</h1>
        <p>
          Each max-w-screen-* utility maps the max-width to the breakpoint width.
        </p>
      </div>
    </div>
  );
}

{/*
CSS Notes:

- `max-w-screen-sm` will give 640px value to the element.
  */}

States and Responsiveness

Dynamic designs often require changing styles during specific states, such as hover, focus, or within breakpoints. Tailwind expands your styling capabilities by combining max-width utilities effortlessly with conditional pseudo-classes or responsive breakpoints.

Hover and Focus States

You can modify the maximum width of an element during states like hover or focus. For instance, you might want a box to expand beyond its initial constraints upon interaction.

This is a live editor. Play around with it!
export default function HoverExpand() {
  return (
    <div className="bg-gray-50 w-screen h-screen flex items-center justify-center">
      <div className="max-w-xs hover:max-w-lg transition-all duration-300 bg-white p-4 rounded-lg shadow-lg">
        <p className="text-gray-800">
          Hovering over this container increases its maximum width dynamically 
          (from 'xs' to 'lg'), creating an interactive visual effect.
        </p>
      </div>
    </div>
  );
}

{/*
CSS Notes:

- hover:max-w-lg: Increases max width dynamically on hover.
  */}

Breakpoint Modifiers

Designing for multiple screens often require selectively applying max-width styles based on viewport sizes. Tailwind’s breakpoint modifiers like sm, md, etc. allow you to add max-width after a certain breakpoint hits.

This is a live editor. Play around with it!
export default function BreakpointMaxWidth() {
  return (
    <div className="flex flex-wrap bg-gray-50 w-screen h-screen items-center justify-center gap-4">
      <div className="max-w-sm md:max-w-lg lg:max-w-2xl bg-blue-100 p-3 rounded shadow">
        <h2 className="text-blue-900 font-bold">
          Breakpoint Adjustments in Action
        </h2>
        <p>
          The maximum width changes smoothly as you move between predefined breakpoints, 
          providing seamless responsiveness from small to large screens.
        </p>
      </div>
    </div>
  );
}

{/*
CSS Notes:

- max-w-sm (base): Defaulted to 24rem for mobile.
- md:max-w-lg: Overrides to 32rem for medium screens.
  */}

Custom Max Width

While Tailwind's predefined utility classes cater to most use cases, there are scenarios where custom values or configurations are necessary. Tailwind offers flexibility for developers to define arbitrary values and extend via theme customization.

Extending the Theme

Modifying your Tailwind configuration file allows you to extend or redefine max-width values. This can be particularly useful when working with highly specific layout constraints.

Here, we've included a unique max-width value named custom for our projects. After adding this in your tailwind.config.js, you can use max-w-custom directly within your HTML or JSX.

This is a live editor. Play around with it!
import tailwindConfig from "./tailwind.config.js";
tailwind.config = tailwindConfig;

export default function LargeImage() {
  return (
    <div className="bg-gray-50 w-screen h-screen flex justify-center items-center">
      <div className="max-w-custom">
        <img 
          className="w-full rounded-md shadow-md" 
          src="https://images.unsplash.com/photo-1511467687858-23d96c32e4ae" 
          alt="Large Asset"
        />
      </div>
    </div>
  );
}

Using Arbitrary Values

In certain projects, you may need highly specific max-width values that aren't covered by Tailwind's predefined units or theme settings. Tailwind lets you assign arbitrary values using brackets [ ].

This feature is particularly valuable when creating one-off layouts, quickly bridging the gap between functionality and design.

This is a live editor. Play around with it!
export default function ArbitraryWidth() {
  return (
    <div className="bg-gray-100 w-screen h-screen flex items-center justify-center">
      <div className="max-w-[20rem] bg-white rounded-lg shadow-md p-6">
        <p className="text-gray-700">
          Here, we’ve applied a custom maximum width of '20rem' using Tailwind’s 
          arbitrary values feature. This approach enhances the flexibility needed for unique layouts.
        </p>
      </div>
    </div>
  );
}

{/*
CSS Notes:

- max-w-[20rem]: Dynamically sets an exact width value inline.
  */}

Real World Examples

Product Grid with Dynamic Card Sizing

This example shows how to create a responsive product grid where each card has a maximum width to maintain readability and visual harmony.

This is a live editor. Play around with it!
export default function ProductGrid() {
  const products = [
    {
      id: 1,
      name: "Premium Leather Backpack",
      price: "$129.99",
      src: "https://images.unsplash.com/photo-1548036328-c9fa89d128fa",
      alt: "Brown leather backpack"
    },
    {
      id: 2,
      name: "Wireless Noise-Canceling Headphones",
      price: "$249.99",
      src: "https://images.unsplash.com/photo-1505740420928-5e560c06d30e",
      alt: "Black wireless headphones"
    },
    {
      id: 3,
      name: "Smart Fitness Watch",
      price: "$199.99",
      src: "https://images.unsplash.com/photo-1579586337278-3befd40fd17a",
      alt: "Modern fitness watch"
    },
    {
      id: 4,
      name: "Mechanical Keyboard",
      price: "$159.99",
      src: "https://images.unsplash.com/photo-1587829741301-dc798b83add3",
      alt: "RGB mechanical keyboard"
    },
    {
      id: 5,
      name: "Ultra-Wide Monitor",
      price: "$499.99",
      src: "https://images.unsplash.com/photo-1527443224154-c4a3942d3acf",
      alt: "Curved gaming monitor"
    },
    {
      id: 6,
      name: "Gaming Mouse",
      price: "$79.99",
      src: "https://images.unsplash.com/photo-1527864550417-7fd91fc51a46",
      alt: "RGB gaming mouse"
    }
  ];

return (
<div className="container mx-auto px-4">
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
{products.map((product) => (
<div key={product.id} className="max-w-sm mx-auto bg-white rounded-lg shadow-lg overflow-hidden">
<img 
              src={product.src} 
              alt={product.alt}
              className="w-full h-48 object-cover"
            />
<div className="p-4">
<h3 className="text-xl font-semibold">{product.name}</h3>
<p className="text-gray-600 mt-2">{product.price}</p>
</div>
</div>
))}
</div>
</div>
);
}

Blog Post Layout with Featured Image

This example demonstrates a blog post layout with a maximum width container for optimal reading experience.

This is a live editor. Play around with it!
export default function BlogPost() {
  const post = {
    title: "The Future of Web Development",
    author: "Alex Johnson",
    date: "2024-01-15",
    featuredImage: "https://images.unsplash.com/photo-1498050108023-c5249f4df085",
    content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
    tags: ["Web Development", "JavaScript", "Future Tech", "Programming", "Tech Trends", "Coding"]
  };

return (
<article className="max-w-3xl mx-auto px-4 py-8">
<header className="mb-8">
<h1 className="text-4xl font-bold mb-4">{post.title}</h1>
<div className="flex items-center text-gray-600 mb-6">
<span>{post.author}</span>
<span className="mx-2">•</span>
<span>{new Date(post.date).toLocaleDateString()}</span>
</div>
<img
          src={post.featuredImage}
          alt="Featured image"
          className="w-full h-64 object-cover rounded-lg"
        />
</header>
<div className="prose max-w-none">
<p>{post.content}</p>
</div>
<div className="mt-6 flex flex-wrap gap-2">
{post.tags.map((tag) => (
<span key={tag} className="px-3 py-1 bg-gray-100 rounded-full text-sm">
{tag}
</span>
))}
</div>
</article>
);
}

Team Members Grid with Bio Cards

This example shows a team members grid with maximum width cards that maintain consistent sizing.

This is a live editor. Play around with it!
export default function TeamGrid() {
  const team = [
    {
      id: 1,
      name: "Sarah Parker",
      role: "CEO",
      bio: "15+ years of experience in tech leadership",
      src: "https://images.unsplash.com/photo-1494790108377-be9c29b29330",
      alt: "Sarah Parker headshot"
    },
    {
      id: 2,
      name: "Michael Chen",
      role: "CTO",
      bio: "Former Google engineer with multiple patents",
      src: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d",
      alt: "Michael Chen headshot"
    },
    {
      id: 3,
      name: "Emma Wilson",
      role: "Design Director",
      bio: "Award-winning designer with global experience",
      src: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80",
      alt: "Emma Wilson headshot"
    },
    {
      id: 4,
      name: "James Rodriguez",
      role: "Lead Developer",
      bio: "Full-stack expert specializing in scalable systems",
      src: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e",
      alt: "James Rodriguez headshot"
    },
    {
      id: 5,
      name: "Lisa Thompson",
      role: "Product Manager",
      bio: "Experienced in launching successful tech products",
      src: "https://images.unsplash.com/photo-1534528741775-53994a69daeb",
      alt: "Lisa Thompson headshot"
    },
    {
      id: 6,
      name: "David Kim",
      role: "Marketing Director",
      bio: "Digital marketing specialist with MBA",
      src: "https://images.unsplash.com/photo-1506794778202-cad84cf45f1d",
      alt: "David Kim headshot"
    }
  ];

return (
<div className="bg-gray-50 py-12">
<div className="max-w-7xl mx-auto px-4">
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
{team.map((member) => (
<div key={member.id} className="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden">
<div className="flex items-center p-6">
<img
                  src={member.src}
                  alt={member.alt}
                  className="h-24 w-24 rounded-full object-cover"
                />
<div className="ml-6">
<h3 className="text-xl font-semibold">{member.name}</h3>
<p className="text-indigo-600">{member.role}</p>
<p className="mt-2 text-gray-600">{member.bio}</p>
</div>
</div>
</div>
))}
</div>
</div>
</div>
);
}

Testimonial Carousel with Max-Width Slides

This example shows a testimonial carousel with maximum width slides for better readability.

This is a live editor. Play around with it!
export default function TestimonialCarousel() {
  const testimonials = [
    {
      id: 1,
      name: "John Doe",
      company: "Tech Corp",
      text: "The best service we've ever used. Absolutely outstanding!",
      avatar: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e",
      rating: 5
    },
    {
      id: 2,
      name: "Jane Smith",
      company: "Design Studios",
      text: "Incredible attention to detail and amazing support team.",
      avatar: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80",
      rating: 5
    },
    {
      id: 3,
      name: "Robert Johnson",
      company: "Marketing Pro",
      text: "Revolutionary product that changed our workflow completely.",
      avatar: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e",
      rating: 4
    },
    {
      id: 4,
      name: "Emily Davis",
      company: "Startup Inc",
      text: "Exceeded all our expectations. Highly recommended!",
      avatar: "https://images.unsplash.com/photo-1534528741775-53994a69daeb",
      rating: 5
    },
    {
      id: 5,
      name: "Michael Brown",
      company: "Agency X",
      text: "The best investment we've made for our business growth.",
      avatar: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d",
      rating: 5
    },
    {
      id: 6,
      name: "Sarah Wilson",
      company: "Creative Co",
      text: "Outstanding product with exceptional customer service.",
      avatar: "https://images.unsplash.com/photo-1494790108377-be9c29b29330",
      rating: 4
    }
  ];

return (
<div className="bg-gray-100 py-16">
<div className="max-w-6xl mx-auto px-4">
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
{testimonials.map((testimonial) => (
<div key={testimonial.id} className="max-w-sm mx-auto bg-white rounded-lg shadow-lg p-6">
<div className="flex items-center mb-4">
<img
src={testimonial.avatar}
alt={`${testimonial.name}'s avatar`}
className="w-12 h-12 rounded-full object-cover"
/>
<div className="ml-4">
<h3 className="font-semibold">{testimonial.name}</h3>
<p className="text-gray-600 text-sm">{testimonial.company}</p>
</div>
</div>
<p className="text-gray-700 mb-4">{testimonial.text}</p>
<div className="flex">
{[...Array(testimonial.rating)].map((_, i) => (
<svg
                    key={i}
                    className="w-5 h-5 text-yellow-400"
                    fill="currentColor"
                    viewBox="0 0 20 20"
                  >
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
</svg>
))}
</div>
</div>
))}
</div>
</div>
</div>
);
}

Feature Comparison Table

This example demonstrates a feature comparison table with maximum width constraints for better organization.

This is a live editor. Play around with it!
export default function FeatureComparison() {
  const features = [
    {
      id: 1,
      name: "Cloud Storage",
      basic: "10GB",
      pro: "100GB",
      enterprise: "Unlimited",
      icon: "https://images.unsplash.com/photo-1590959651373-a3db0f38a961"
    },
    {
      id: 2,
      name: "Team Members",
      basic: "3",
      pro: "10",
      enterprise: "Unlimited",
      icon: "https://images.unsplash.com/photo-1522071820081-009f0129c71c"
    },
    {
      id: 3,
      name: "Support",
      basic: "Email",
      pro: "Priority Email",
      enterprise: "24/7 Phone & Email",
      icon: "https://images.unsplash.com/photo-1549923746-c502d488b3ea"
    },
    {
      id: 4,
      name: "Analytics",
      basic: "Basic",
      pro: "Advanced",
      enterprise: "Custom",
      icon: "https://images.unsplash.com/photo-1551288049-bebda4e38f71"
    },
    {
      id: 5,
      name: "API Access",
      basic: "No",
      pro: "Yes",
      enterprise: "Custom",
      icon: "https://images.unsplash.com/photo-1558494949-ef010cbdcc31"
    },
    {
      id: 6,
      name: "Custom Domain",
      basic: "No",
      pro: "Yes",
      enterprise: "Multiple",
      icon: "https://images.unsplash.com/photo-1544197150-b99a580bb7a8"
    }
  ];

return (
<div className="py-12 bg-gray-50">
<div className="max-w-5xl mx-auto px-4">
<table className="w-full bg-white rounded-lg shadow-lg">
<thead>
<tr className="bg-gray-100">
<th className="py-4 px-6 text-left">Feature</th>
<th className="py-4 px-6 text-center">Basic</th>
<th className="py-4 px-6 text-center">Pro</th>
<th className="py-4 px-6 text-center">Enterprise</th>
</tr>
</thead>
<tbody>
{features.map((feature) => (
<tr key={feature.id} className="border-t">
<td className="py-4 px-6">
<div className="flex items-center">
<img
                      src={feature.icon}
                      alt={feature.name}
                      className="w-8 h-8 rounded object-cover mr-3"
                    />
{feature.name}
</div>
</td>
<td className="py-4 px-6 text-center">{feature.basic}</td>
<td className="py-4 px-6 text-center">{feature.pro}</td>
<td className="py-4 px-6 text-center">{feature.enterprise}</td>
</tr>
))}
</tbody>
</table>
</div>
</div>
);
}

Customization Examples

Responsive Blog Card with Custom Max-Width

This example demonstrates how to create a responsive blog card with custom max-width settings for different breakpoints.

This is a live editor. Play around with it!
import tailwindConfig from "./tailwind.config.js";
tailwind.config = tailwindConfig;

// App.js
export default function BlogCard() {
return (
<div className="flex justify-center items-center min-h-screen bg-gray-100">
<article className="max-w-blog-card md:max-w-blog-card-lg lg:max-w-blog-card-xl mx-auto bg-white rounded-xl shadow-lg overflow-hidden">
<img
          src="https://images.unsplash.com/photo-1498050108023-c5249f4df085"
          alt="Tech workspace"
          className="w-full h-48 object-cover"
        />
<div className="p-6">
<h2 className="text-2xl font-bold text-gray-800 mb-2">
Modern Development Practices
</h2>
<p className="text-gray-600">
Explore the latest trends in web development and best practices for
building scalable applications.
</p>
</div>
</article>
</div>
)
}

Product Feature Section with Dynamic Max-Width

This example shows how to implement a product feature section with custom max-width constraints for content alignment.

This is a live editor. Play around with it!
import tailwindConfig from "./tailwind.config.js";
tailwind.config = tailwindConfig;

// App.js
export default function ProductFeature() {
return (
<section className="bg-indigo-50 py-16">
<div className="max-w-feature mx-auto px-4">
<div className="flex flex-col md:flex-row items-center justify-between gap-12">
<div className="max-w-feature-content">
<h2 className="text-4xl font-bold text-indigo-900 mb-6">
Transform Your Workflow
</h2>
<p className="text-indigo-700 mb-8">
Our intelligent automation system helps you streamline your daily
tasks and boost productivity with advanced AI capabilities.
</p>
<button className="bg-indigo-600 text-white px-8 py-3 rounded-lg hover:bg-indigo-700 transition-colors">
Get Started
</button>
</div>
<div className="max-w-feature-image">
<img
              src="https://images.unsplash.com/photo-1551434678-e076c223a692"
              alt="Product feature"
              className="rounded-2xl shadow-xl"
            />
</div>
</div>
</div>
</section>
)
}

Newsletter Subscription Form with Contained Max-Width

This example demonstrates how to create a newsletter subscription form with precise max-width controls for different elements.

This is a live editor. Play around with it!
import tailwindConfig from "./tailwind.config.js";
tailwind.config = tailwindConfig;

// App.js
export default function NewsletterForm() {
return (
<div className="min-h-screen bg-gradient-to-br from-purple-500 to-pink-500 flex items-center justify-center p-4">
<div className="max-w-form-container bg-white rounded-2xl shadow-2xl p-8">
<div className="max-w-form-content mx-auto text-center">
<h2 className="text-3xl font-bold text-gray-800 mb-4">
Stay Updated
</h2>
<p className="text-gray-600 mb-8">
Subscribe to our newsletter for weekly insights on technology,
design, and development.
</p>
<form className="flex flex-col items-center gap-4">
<input
              type="email"
              placeholder="Enter your email"
              className="max-w-input-field w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500"
            />
<button className="bg-gradient-to-r from-purple-500 to-pink-500 text-white px-8 py-3 rounded-lg hover:opacity-90 transition-opacity">
Subscribe Now
</button>
</form>
</div>
</div>
</div>
)
}

Best Practices

Maintain Design Consistency

Applying Max-Width in Tailwind CSS should align with your design system to create uniformity throughout your project. Use consistent size constraints like max-w-lg or max-w-xl across components to ensure every layout adheres to similar proportions. For instance, containers for content-heavy elements like text or images can use max-w-prose for readability.

When designing for larger projects, consider defining custom max-width values in your Tailwind configuration file to reference throughout your project for reusability and adherence to design standards.

Leverage Utility Combinations

Combining multiple utilities with Max-Width allows you to build intricate designs while maintaining clarity. For instance, pairing max-w-md with responsive padding utilities like p-4 md:p-6 lg:p-8 ensures that your content scales fluidly.

Proper utility combinations minimize the need for custom CSS while giving you significant flexibility to adjust layouts based on their context. This ensures clean, maintainable code and scalability across multiple projects.

Accessibility Considerations

Enhance Readability and Navigability

Max-Width plays a crucial role in ensuring accessible and user-friendly designs. By setting constraints like max-w-prose for text-heavy elements, you improve readability, especially for users with limited vision or difficulty scanning wide lines of text.

This ensures users can focus on the content without needing to adjust their screen or struggle with long text lines, thereby creating a more inclusive web experience.

This is a live editor. Play around with it!
export default function ReadableArticle() {
  return (
    <article className="bg-gray-100 min-h-screen flex items-center justify-center">
      <div className="max-w-prose p-6 bg-white rounded-lg shadow-md">
        <h1 className="text-3xl font-bold">Accessible Text Layout</h1>
        <p className="mt-4 text-gray-800">
          Applying `max-w-prose` ensures that text-heavy elements maintain readable widths, enabling clear and consistent typography for your users.
        </p>
      </div>
    </article>
  );
}

Support Accessible Interactive Elements

Interactive components like buttons, forms, or modal windows benefit from Max-Width when used appropriately. Constraining their width ensures that these elements are not only easier to interact with but are also visually consistent across various layouts.

Focused application of Max-Width ensures interactive components remain accessible and user-friendly across all device sizes.

This is a live editor. Play around with it!
export default function AccessibleForm() {
  return (
    <form className="bg-gray-100 min-h-screen flex items-center justify-center">
      <div className="max-w-sm w-full p-6 bg-white rounded-lg shadow-lg">
        <label className="block text-gray-700 font-semibold mb-2" htmlFor="email">
          Email Address
        </label>
        <input
          id="email"
          className="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
          type="email"
          placeholder="Enter your email"
        />
        <button
          className="mt-4 w-full bg-blue-600 text-white py-3 rounded-lg hover:bg-blue-700 focus:ring-2 focus:ring-blue-500"
          type="submit"
        >
          Subscribe
        </button>
      </div>
    </form>
  );
}

Debugging Common Issues

Resolve Common Problems

Unintended overflow caused by improper Max-Width use can break layouts and cause misalignment. Use overflow-auto and max-w-full strategically to control overflow scenarios and maintain style consistency.

This utility combination reduces common problems, ensuring your elements stay confined to their intended layout regions.

This is a live editor. Play around with it!
export default function OverflowFix() {
  return (
    <div className="bg-gray-100 min-h-screen flex items-center justify-center overflow-auto">
      <div className="max-w-full sm:max-w-lg bg-white p-6 shadow-lg">
        <h2 className="text-xl font-bold">Fixing Overflow Issues</h2>
        <p className="mt-2">
          Applying `max-w-full` prevents overflow, ensuring that designs adapt seamlessly without breaking under large content constraints.
        </p>
      </div>
    </div>
  );
}

Handle Nested Element Challenges

When dealing with deeply nested components, applying max-w-* to the parent container isn’t always sufficient. Apply max-width directly on child elements to ensure they cover no extra space.

This is a live editor. Play around with it!
export default function NestedWidthHandling() {
  return (
    <div className="bg-gray-200 min-h-screen flex items-center">
      <div className="max-w-3xl w-full bg-white flex gap-6 rounded-lg shadow-lg p-6">
        <div className="max-w-40 bg-blue-100 p-4 rounded-lg">
          <h3 className="text-lg font-bold">Nested Constraints</h3>
          <p>
            Define `max-w` on child containers within the same parent to create
            harmonious layouts without breaking nested structures.
          </p>
        </div>
        <div className="max-w-40 bg-blue-100 p-4 rounded-lg">
          <h3 className="text-lg font-bold">Nested Constraints</h3>
          <p>
            Define `max-w` on child containers within the same parent to create
            harmonious layouts without breaking nested structures.
          </p>
        </div>
      </div>
    </div>
  );
}
Min WidthMin Height

Resources

DocsBlogEmail Templates

Legal Stuff

Terms & ConditionsPrivacy PolicyAcceptable Use Policy