In tailwind CSS, this class accepts multiple values, and all of the properties are covered 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.
Table of Contents
Tailwind CSS Box Sizing
Tailwind CSS Box sizing class acknowledges more than one worth in tailwind CSS. Each property is shrouded as a class structure. It is an option in contrast to the CSS box-sizing property. This class is utilized to characterize how the client(user) ought to work out the all-out width and tallness(height) of a component for example padding and borders, are to be incorporated or not.
There are two categorizes of box sizing, which includes:
Class | Properties |
---|---|
box-border | box-sizing: border-box; |
box-content | box-sizing: content-box; |
box-border
In this mode, the width and height properties incorporate content, padding, and borders. For example, assuming that we set a component’s/elements width to 300 pixels, that 300 pixels will incorporate any border or padding we add, and the content box will retain that additional width. This regularly makes it a lot simpler to measure components (elements).
Syntax:
<element class="box-border">..</element>
Example:
<!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">
HOW2TRICK
</h1>
<b>Tailwind CSS box-border Class</b>
<div class="box-border h-28 w-32 p-4
border-4 bg-green-500 m4">
Tailwind CSS Box Sizing
</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 300 pixels, then the element’s content box will be 300 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:
<!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">
HOW2TRICK
</h1>
<b>Tailwind CSS box-content Class</b>
<div class="box-content h-28 w-32 p-4
border-4 bg-green-500 m4">
Tailwind CSS Box Sizing
</div>
</center>
</body>
</html>
Output: