Tutorials


Max-Width and Max-Height Utilities in Tailwind CSS


Max-Width and Max-Height Utilities in Tailwind CSS

Tailwind CSS provides utilities for controlling the maximum width and height of elements. These utilities help you set constraints on how large an element can be, which is useful for creating responsive layouts and managing the size of elements within their containers.

1. Max-Width Utilities

The max-width property controls the maximum width an element can grow to. Tailwind CSS provides several utilities for setting maximum widths.

Utility Classes

  • max-w-{size}: Sets the maximum width of an element.

Common Values:

  • max-w-xs: Sets max-width to 20rem (320px).
  • max-w-sm: Sets max-width to 24rem (384px).
  • max-w-md: Sets max-width to 28rem (448px).
  • max-w-lg: Sets max-width to 32rem (512px).
  • max-w-xl: Sets max-width to 36rem (576px).
  • max-w-2xl: Sets max-width to 42rem (672px).
  • max-w-3xl: Sets max-width to 48rem (768px).
  • max-w-4xl: Sets max-width to 56rem (896px).
  • max-w-5xl: Sets max-width to 64rem (1024px).
  • max-w-6xl: Sets max-width to 72rem (1152px).
  • max-w-full: Sets max-width to 100%.
  • max-w-screen-sm: Sets max-width to 640px (small screen).
  • max-w-screen-md: Sets max-width to 768px (medium screen).
  • max-w-screen-lg: Sets max-width to 1024px (large screen).
  • max-w-screen-xl: Sets max-width to 1280px (extra-large screen).

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Max Width Example</title>
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@3.0.0/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
  <div class="max-w-xs bg-blue-500 text-white p-4">
    Max-width set to 20rem
  </div>
  <div class="max-w-lg bg-red-500 text-white p-4 mt-4">
    Max-width set to 32rem
  </div>
</body>
</html>

In this example:

  • The first div has a maximum width of 20rem.
  • The second div has a maximum width of 32rem.

2. Max-Height Utilities

The max-height property controls the maximum height an element can grow to. Tailwind CSS provides several utilities for setting maximum heights.

Utility Classes

  • max-h-{size}: Sets the maximum height of an element.

Common Values:

  • max-h-0: Sets max-height to 0.
  • max-h-full: Sets max-height to 100%.
  • max-h-screen: Sets max-height to 100vh (viewport height).

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Max Height Example</title>
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@3.0.0/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
  <div class="max-h-40 bg-blue-500 text-white p-4 overflow-auto">
    Max-height set to 10rem
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin scelerisque odio eu libero aliquet, sed luctus ipsum faucibus. Integer ut ligula et libero fermentum fermentum. Nullam scelerisque libero id neque interdum, nec commodo urna egestas. Integer in massa eget purus dapibus feugiat.</p>
  </div>
  <div class="max-h-screen bg-red-500 text-white p-4 mt-4">
    Max-height set to 100vh
  </div>
</body>
</html>

In this example:

  • The first div has a maximum height of 10rem. If the content exceeds this height, it will be scrollable due to overflow-auto.
  • The second div has a maximum height of 100vh.

3. Custom Max-Width and Max-Height Values

You can define custom max-width and max-height values by extending the theme in the tailwind.config.js file.

Configuration

For Max-Width:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      maxWidth: {
        'custom': '80rem',  // Custom max-width value
      },
    },
  },
};

For Max-Height:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      maxHeight: {
        'custom': '50rem',  // Custom max-height value
      },
    },
  },
};

Using Custom Values

For Max-Width:

<div class="max-w-custom bg-green-500 text-white p-4">
  Element with custom max-width 80rem
</div>

For Max-Height:

<div class="max-h-custom bg-yellow-500 text-white p-4">
  Element with custom max-height 50rem
</div>

Summary

  • Max-Width Utilities: Use classes like max-w-xs, max-w-full, and responsive screen sizes to control the maximum width of elements.
  • Max-Height Utilities: Use classes like max-h-full, max-h-screen, and max-h-40 to control the maximum height of elements.
  • Custom Values: Define and use custom max-width and max-height values by extending the theme in tailwind.config.js.


Next Previous




@aCodeTutorials All Rights Reserved
privacy policy | about