Height and Width
The height and width of elements are notoriously difficult to manage in CSS. Tailwind provides some utilities for sizing, but remember that sizing is also often dependent on the available size based on both the parent elements and the content.
Tailwind uses the patterns w-{size} and h-{size} for the width and height utility classes. For both directions, Tailwind offers a set of fixed size options based on the same sizing scale and the same set of numbers we’ve seen for padding and margins, with each number corresponding to 0.25rem.
Special options include these:
-auto | auto-sizing |
-px | single pixel |
-full | 100% of the parent container |
-screen | 100% of the viewport |
-min | minimum content size (CSS min-content) |
-max | maximum content size (CSS max-content) ... |
Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.
Read now
Unlock full access