Tailwind 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