Tailwind CSS Tutorial

Tailwind CSS Tutorial Tailwind CSS Installation

Tailwind CSS Layout

Tailwind CSS Container Tailwind CSS Box Sizing Tailwind CSS Display Tailwind CSS Float Tailwind CSS Clear Tailwind CSS Object Fit Tailwind CSS Object Position Tailwind CSS Overflow Tailwind CSS Position Tailwind CSS Top/Right/Bottom/Left Tailwind CSS Visibility Tailwind CSS Z-index

Tailwind CSS Flex Box

Tailwind CSS Flex Direction Tailwind CSS Flex Wrap Tailwind CSS Flex Tailwind CSS Flex Grow Tailwind CSS Flex Shrink Tailwind CSS Order

Tailwind CSS Grid

Tailwind CSS Grid Template Columns Tailwind CSS Grid Column Start End Tailwind CSS Grid Template Rows Tailwind CSS Grid Row Start End Tailwind CSS Grid Auto Flow Tailwind CSS Grid Auto Columns Tailwind CSS Grid Auto Rows Tailwind CSS Gap

Tailwind CSS Alignment

Tailwind CSS Justify Content Tailwind CSS Justify Items Tailwind CSS Justify Self Tailwind CSS Align Content Tailwind CSS Align Items Tailwind CSS Align Self Tailwind CSS Place Content Tailwind CSS Place Items Tailwind CSS Place Self

Tailwind CSS Spacing

Tailwind CSS Padding Tailwind CSS Margin Tailwind CSS Space Between

Tailwind CSS Sizing

Tailwind CSS Width Tailwind CSS Min-Width Tailwind CSS Max-Width Tailwind CSS Height Tailwind CSS Min-Height Tailwind CSS Max-Height

Tailwind CSS Effects

Tailwind CSS Box Shadow Tailwind CSS Opacity

Tailwind CSS SVG

Tailwind CSS Fill Tailwind CSS Stroke Tailwind CSS Stroke Width

Tailwind CSS Max-Width
2022-04-10 10:41:51

Tailwind CSS Max-Width

In tailwind CSS, this class accepts a large number of values, and all of the properties are covered in class form. It's a replacement for the CSS max-width property. This class is used to specify an element's maximum width. The width value must be less than or equal to the max-width value. Max-width preserves the set maximum width of the content supplied within the element is larger.

The Prose class, a new CSS property presentation, will be demonstrated in this class. It was utilized to achieve the best possible reading width. If you're familiar with the "typography plugin," you'll understand how this class works.

Max-Width Classes

The various max-width classes are as follows:

  • max-w-0: This class's max-width: 0rem property is used to specify the screen width.
  • max-w-none: The screen width is configured using the max-width: none class.
  • max-w-xs: The screen width is configured with the max-width: 20rem class.
  • max-w-sm: The screen width is set using the max-width: 24rem class.
  • max-w-md: The maximum screen width is set to 28 pixels with this class.
  • max-w-lg: This class specifies a 32-pixel maximum screen width.
  • max-w-xl: To specify the screen width, use the max-width: 36rem class.
  • max-w-2xl: The screen width is configured using the max-width: 42rem class.
  • max-w-3xl: The screen width is set using the max-width: 48rem class.
  • max-w-4xl: The maximum screen width is set to 56 pixels with this class.
  • max-w-5xl: This class specifies a 64-pixel maximum screen width.
  • The max-width: 72rem class is used to set the screen width for max-w-6xl.
  • max-w-7xl: The screen width is set using the max-width: 80rem class.
  • max-w-full: The screen width is set using the max-width: 100 percent class.
  • max-w-min: The screen width is set using the max-width: min-content class.
  • max-w-max: The maximum width is: The screen width is controlled by the max-content class.
  • max-w-prose: The screen width is configured using the max-width: 65ch class.
  • max-w-screen-sm: The screen width is set using the max-width: 640px class.
  • max-w-screen-md: The screen width is set using the max-width: 768px class.
  • max-w-screen-lg: The max-width: 1024px class is used to set the screen width.
  • max-w-screen-xl: The max-width: 1280px class is used to set the screen width.
  • max-w-screen-2xl: The max-width: 1536px class is used to set the screen width.

Syntax:

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

Code:

<!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-red-600 text-5xl font-bold">
       Tutorial and Example
    </h1>
    <b>Max-Width Class - Tailwind CSS </b>
    <div class="h-8 max-w-xs mx-auto bg-red-400 rounded-lg text-white">
        max-w-xs
    </div>
    <div class="h-8 max-w-md mx-auto bg-red-400 rounded-lg text-white">
        max-w-md
    </div>
    <div class="h-8 max-w-lg mx-auto bg-red-400 rounded-lg text-white">
        max-w-lg
    </div>
    <div class="h-8 max-w-xl mx-auto bg-red-400 rounded-lg text-white">
        max-w-xl
    </div>
    <div class="h-8 max-w-2xl mx-auto bg-red-400 rounded-lg text-white">
        max-w-2xl
    </div>
    <div class="h-8 max-w-max mx-auto bg-red-400 rounded-lg text-white">
        max-w-max
    </div>
</body>
</html>

Output:

Tailwind CSS Max-Width