VOOZH about

URL: https://www.geeksforgeeks.org/css/tailwind-css-max-width/

⇱ Tailwind CSS Max-Width - GeeksforGeeks


  • Courses
  • Tutorials
  • Interview Prep

Tailwind CSS Max-Width

Last Updated : 23 Jul, 2025

This class accepts lots of values in tailwind CSS in which all the properties are covered in class form.  It is the alternative to the CSS max-width property. This class is used to define the maximum width of an element. The value of the width cannot be greater than the value of the max-width. If the content specified within the element is bigger, max-width maintains the specified maximum width.

In this class, we will see a new, CSS property presentation, the Prose class. It has been used to have an optimal reading width. If you are familiar with the "typography plugin" then you can guess the working of this class.

Max-Width Classes

  • max-w-0: This class is used to set the screen width as max-width: 0rem.
  • max-w-none: This class is used to set the screen width as max-width: none.
  • max-w-xs: This class is used to set the screen width as max-width: 20rem.
  • max-w-sm: This class is used to set the screen width as max-width: 24rem.
  • max-w-md: This class is used to set the screen width as max-width: 28rem.
  • max-w-lg: This class is used to set the screen width as max-width: 32rem.
  • max-w-xl: This class is used to set the screen width as max-width: 36rem.
  • max-w-2xl: This class is used to set the screen width as max-width: 42rem;
  • max-w-3xl: This class is used to set the screen width as max-width: 48rem.
  • max-w-4xl: This class is used to set the screen width as max-width: 56rem.
  • max-w-5xl: This class is used to set the screen width as max-width: 64rem.
  • max-w-6xl: This class is used to set the screen width as max-width: 72rem.
  • max-w-7xl: This class is used to set the screen width as max-width: 80rem.
  • max-w-full: This class is used to set the screen width as max-width: 100%.
  • max-w-min: This class is used to set the screen width as max-width: min-content.
  • max-w-max: This class is used to set the screen width as max-width: max-content.
  • max-w-prose: This class is used to set the screen width as max-width: 65ch.
  • max-w-screen-sm: This class is used to set the screen width as max-width: 640px.
  • max-w-screen-md: This class is used to set the screen width as max-width: 768px.
  • max-w-screen-lg: This class is used to set the screen width as max-width: 1024px.
  • max-w-screen-xl:  This class is used to set the screen width as max-width: 1280px.
  • max-w-screen-2xl: This class is used to set the screen width as max-width: 1536px.

Syntax:

<element class="max-w-0">...</element>

Example:

Output:

👁 Image
Max-Width class
Comment