Tailwind CSS Max-Width

The max-width utility class in Tailwind CSS allows you to control the maximum width of elements. It provides a set of classes that enable you to set the maximum width to specific values, percentages, or use predefined max-width utilities for common use cases.

Setting Tailwind Max Width

To set the Tailwind max-width of an element, you can use the max-w-{size} class, where {size} can be one of the following options:

• max-w-{value}: This sets the maximum width to a specific value in pixels.

max-w-xs, max-w-sm, max-w-md, max-w-lg, max-w-xl, max-w-2xl, max-w-3xl, max-w-4xl, max-w-5xl, max-w-6xl: These are predefined max-width classes that provide commonly used maximum widths for different breakpoints.

• max-w-full: This sets the maximum width to 100% of the parent container. max-w-screen-sm, max-w-screen-md, max-w-screen-lg, max-w-screen-xl: These are predefined max-width classes that set the maximum width to the corresponding breakpoint size of the viewport.

Here's an example of how to use the Tailwind max-width utility classes:

<div class="max-w-lg">
  This div has a maximum width of large size.
</div>

Preview

Percentage-based Max-Width

Tailwind CSS also provides utility classes for setting Tailwind max width as a percentage of the parent container's width. You can use the max-w-{percentage} class to achieve this. Here's an example:

<div class="max-w-full">
  This div has a maximum width of 100% of its parent container.
</div>

Preview

Responsive Tailwind Max Width

Tailwind CSS allows you to control the maximum width of elements responsively at different breakpoints. To use responsive Tailwind max width classes, you can append the breakpoint prefix to the max-width classes. For example, md:max-w-48 sets the maximum width to 48 pixels starting from the medium breakpoint and above. Here's an example:

<div class="max-w-lg md:max-w-48">
  This div has a maximum width of large size by default, and 48 pixels starting from the medium
  breakpoint.
</div>

In the above example, the max-w-lg class is applied by default, setting the Tailwind max width to a large size. However, starting from the medium breakpoint and above, the md:max-w-48 class is applied, changing the Tailwind max width to 48 pixels.

Tailwind Max Width class Table

Windframe Tailwind blocks

Pricing

Build modern projects using Bootstrap 5 and Contrast

Trying to create components and pages for a web app or website from scratch while maintaining a modern User interface can be very tedious. This is why we created Contrast, to help drastically reduce the amount of time we spend doing that. so we can focus on building some other aspects of the project.

Contrast Bootstrap PRO consists of a Premium UI Kit Library featuring over 10000+ component variants. Which even comes bundled together with its own admin template comprising of 5 admin dashboards and 23+ additional admin and multipurpose pages for building almost any type of website or web app.
See a demo and learn more about Contrast Bootstrap Pro by clicking here.