Tailwind CSS Size Control

Tailwind CSS provides a set of concise utility classes that help developers quickly control element dimensions in HTML.

The following are some common size control utility classes and their usage.

---

Width - w-*

w-*Used to set the width of an element.

Tailwind provides some predefined widths, supporting pixels, percentages, viewport units, etc.

Class name	Meaning	Example
w-1/2	Set width to half of the parent element	<div class="w-1/2">Content</div>
w-1/4	Set width to a quarter of the parent element	<div class="w-1/4">Content</div>
w-full	Set width to 100% of the parent element	<div class="w-full">Content</div>
w-screen	Set width to viewport width	<div class="w-screen">Content</div>
w-64	Set width to 16rem (256px)	<div class="w-64">Content</div>
w-auto	Width automatically adapts to content	<div class="w-auto">Content</div>

Use utility classes such as w-px, w-1, w-64 to set a fixed width for an element.

Use utility classes such as w-full, w-1/2, w-2/5 to set percentage-based element widths.

Use w-screen to make an element span the full width of the viewport.

<div class="w-screen">
  <!-- ... -->
</div>

If you need to remove the specified width of an element under certain conditions (e.g., at a specific breakpoint), the w-auto utility can be useful:

<div class="w-full md:w-auto">
  <!-- ... -->
</div>

Height - h-*

Height classes are used to set the height of an element, also supporting pixels, percentages, viewport units, etc. Common height utility classes include:

Class name	Meaning	Example
h-16	Set height to 4rem (64px)	<div class="h-16">Content</div>
h-1/2	Set height to half of the parent element	<div class="h-1/2">Content</div>
h-screen	Set height to viewport height	<div class="h-screen">Content</div>
h-auto	Height automatically adapts to content	<div class="h-auto">Content</div>

Use utility classes such as h-px, h-1, h-64 to set a fixed height for an element.

Use h-full to set an element's height to 100% of its parent element, provided the parent has a defined height.

<div class="h-48">
  <div class="h-full ...">
    <!-- 这个元素的高度将是 `12rem`（h-48） -->
  </div>
</div>

Use h-screen to make an element span the full height of the viewport.

<div class="h-screen">
  <!-- ... -->
</div>

Use h-dvh to make an element span the full height of the viewport; the height also changes as the browser user interface expands or contracts.

Scroll up and down in the viewport to hide/show the browser user interface:

Use h-lvh to set an element's height to the largest possible height of the viewport. This behaves the same as 100vh.

Scroll up and down in the viewport to hide/show the browser user interface:

Use h-svh to set an element's height to the smallest possible height of the viewport.

<div class="h-svh">
  <!-- ... -->
</div>

---

Size Utility Classes

In Tailwind CSS,sizeutility classes allow you to set both the width (width) and height (height). These utility classes are typically used in scenarios requiring a fixed width-to-height ratio, such as creating squares, circles, or containers with fixed proportions.

size-*Class

Tailwind provides somesizeutility classes that can set an element'swidth and heightto the same value.

Commonly used utility classes include:

Class name	Meaning	Example
size-0	Set both width and height to0	<div class="size-0">Content</div>
size-1	Set both width and height to0.25rem	<div class="size-1">Content</div>
size-2	Set both width and height to0.5rem	<div class="size-2">Content</div>
size-4	Set both width and height to1rem	<div class="size-4">Content</div>
size-8	Set both width and height to2rem	<div class="size-8">Content</div>
size-16	Set both width and height to4rem	<div class="size-16">Content</div>
size-32	Set both width and height to8rem	<div class="size-32">Content</div>
size-64	Set both width and height to16rem	<div class="size-64">Content</div>
size-auto	Set both width and height to auto-fit	<div class="size-auto">Content</div>

Thesesizeutility classes set the same value for both the width and height of an element at the same time, commonly used in scenarios requiring equal width and height, such as:

• Circular images
• Card components
• Fixed-size elements such as buttons

Use utility classes such as size-px, size-1, size-64 to set both a fixed width and height for an element.

Use size-full to set an element's width and height to 100% of the parent container's width and height.

<div class="h-56 p-2 ...">
  <div class="size-full ...">size-full</div>
</div>

If you need to remove the specified width and height of an element under certain conditions (e.g., at a specific breakpoint), the size-auto utility can be useful:

<div class="size-full md:size-auto">
  <!-- ... -->
</div>

The size-auto class is well suited for elements whose dimensions are not fixed and adapt to the size of their content.

Tailwind CSS also supports responsive design, allowing differentsizeutility classes to be used at different screen sizes. You can set different widths and heights for an element at different screen widths.

<div class="size-16 md:size-32 lg:size-64">
  This box's size will change based on the screen size.
</div>

In the code above, size-16 is the default size, which becomes size-32 on medium screens (md:) and size-64 on large screens (lg:).

---

Min Width - min-w-*

min-w-*Used to set the minimum width of an element, ensuring the element is not smaller than the specified width when its content is insufficient.

Class name	Meaning	Example
min-w-full	Set minimum width to 100%	<div class="min-w-full">Content</div>
min-w-0	Set minimum width to 0	<div class="min-w-0">Content</div>
min-w-max	Set minimum width to the maximum width of the content	<div class="min-w-max">Content</div>

---

Min Height - min-h-*

min-h-*Used to set the minimum height of an element, ensuring the element's height is not less than the specified value.

Class name	Meaning	Example
min-h-0	Set minimum height to 0	<div class="min-h-0">Content</div>
min-h-full	Set minimum height to 100% of the parent element	<div class="min-h-full">Content</div>
min-h-screen	Set minimum height to viewport height	<div class="min-h-screen">Content</div>

---

Max Width - max-w-*

max-w-*Used to set the maximum width of an element. When the content width of the element exceeds this value, the element width will not continue to increase.

Class name	Meaning	Example
max-w-xs	Set maximum width to20rem（320px）	<div class="max-w-xs">Content</div>
max-w-sm	Set maximum width to24rem（384px）	<div class="max-w-sm">Content</div>
max-w-full	Set maximum width to 100% of the parent container	<div class="max-w-full">Content</div>

---

Max Height - max-h-*

max-h-*Used to set the maximum height of an element. When the content height of the element exceeds this value, the element height will not continue to increase.

Class name	Meaning	Example
max-h-32	Set maximum height to8rem（128px）	<div class="max-h-32">Content</div>
max-h-screen	Set maximum height to viewport height	<div class="max-h-screen">Content</div>

---

Auto Size - auto

w-autoandh-autoThe class is used to make an element's width or height adapt to its content.

Class name	Meaning	Example
w-auto	Width automatically adjusts	<div class="w-auto">Content</div>
h-auto	Height automatically adjusts	<div class="h-auto">Content</div>

Other Extensions