Skip to content
Related Articles

Related Articles

Tailwind CSS Box Sizing
  • Last Updated : 17 Feb, 2021
GeeksforGeeks - Summer Carnival Banner

This class accepts more than one value in tailwind CSS all the properties are covered as in class form. It is the alternative to the CSS box-sizing property. This class is used to defines how the user should calculate the total width and height of an element i.e. padding and borders, are to be included or not.

Box Sizing:

  • box-border 
  • box-content 

box-border: In this mode, the width and height properties include content, padding, and borders i.e. if we set an element’s width to 200 pixels, that 200 pixels will include any border or padding we added, and the content box will shrink to absorb that extra width. This typically makes it much easier to size elements.

Syntax:

<element class="box-border">..</element>

Example:



HTML




<!DOCTYPE html> 
<head
    <title>Tailwind box-border Class</title
    <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" 
          rel="stylesheet"
</head
  
<body class="text-center"
<center>
    <h1 class="text-green-600 text-5xl font-bold">
        GeeksforGeeks
    </h1
    <b>Tailwind CSS box-border Class</b
    <div class="box-border h-28 w-32 p-4 
                border-4 bg-green-500 m4">
        A Computer Science Portal
    </div
</center>
</body
  
</html>

Output:

box-content: This is the default value of the box-sizing class. In this mode, the width and height class include only the content. Border and padding are not included in it i.e if we set an element’s width to 200 pixels, then the element’s content box will be 200 pixels wide, and the width of any border or padding will be added to the final rendered width.

Syntax:

<element class="box-content">..</element>

Example: 

HTML




<!DOCTYPE html> 
<head
    <title>Tailwind box-content Class</title
    <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" 
          rel="stylesheet"
</head
  
<body class="text-center"
<center>
    <h1 class="text-green-600 text-5xl font-bold">
        GeeksforGeeks
    </h1
    <b>Tailwind CSS box-content Class</b
    <div class="box-content h-28 w-32 p-4 
                border-4 bg-green-500 m4">
        A Computer Science Portal
    </div
</center>
</body
  
</html>

Output:


Attention reader! Don’t stop learning now. Get hold of all the important DSA concepts with the DSA Self Paced Course at a student-friendly price and become industry ready.

My Personal Notes arrow_drop_up
Recommended Articles
Page :