Open In App

Tailwind CSS Max-Width

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

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:

HTML




<!DOCTYPE html> 
<head
    <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" 
          rel="stylesheet"
</head
  
<body class="text-center mx-4 space-y-2"
    <h1 class="text-green-600 text-5xl font-bold">
        GeeksforGeeks
    </h1
    <b>Tailwind CSS Max-Width Class</b
    <div class="h-8 max-w-xs mx-auto bg-green-400 rounded-lg text-white">
        max-w-xs
    </div>
    <div class="h-8 max-w-md mx-auto bg-green-400 rounded-lg text-white">
        max-w-md
    </div>
    <div class="h-8 max-w-lg mx-auto bg-green-400 rounded-lg text-white">
        max-w-lg
    </div>
    <div class="h-8 max-w-xl mx-auto bg-green-400 rounded-lg text-white">
        max-w-xl
    </div>
    <div class="h-8 max-w-2xl mx-auto bg-green-400 rounded-lg text-white">
        max-w-2xl
    </div>
    <div class="h-8 max-w-max mx-auto bg-green-400 rounded-lg text-white">
        max-w-max
    </div>
</body
  
</html>


Output:

Max-Width class



Last Updated : 23 Mar, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads