YouTip

Tailwind CSS provides a set of concise utility classes to help developers quickly control element sizing in HTML. Here are some common sizing utility classes and their usage. * * * ## Width - w-* w-* is 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 parent element | `` | | `w-1/4` | Set width to one quarter of parent element | `` | | `w-1/2` | Set width to 100% of parent element | `` | | `w-screen` | Set width to viewport width | `` | | `w-64` | Set width to 16rem (256px) | `` | | `w-auto` | Width adapts to content | `` | Use utility classes like w-px, w-1, w-64 to set fixed widths for elements. ## Example [Try it »](#) Use utility classes like w-full, w-1/2, w-2/5 to set percentage-based element widths. ## Example [Try it »](#) Use w-screen to make elements span the entire viewport width. If you need to remove the specified width of an element under specific conditions (e.g., at specific breakpoints), the w-auto utility can be useful: ## **Height** - `h-*` Height classes are used to set the height of elements, also supporting pixels, percentages, and viewport units. Common height utility classes include: | Class Name | Meaning | Example | | --- | --- | --- | | `h-16` | Set height to 4rem (64px) | `` | | `h-1/2` | Set height to half of parent element | `` | | `h-screen` | Set height to viewport height | `` | | `h-auto` | Height adapts to content | `` | Use utility classes like h-px, h-1, h-64 to set fixed heights for elements. ## Example [Try it »](#) Use h-full to set the element's height to 100% of its parent element, provided the parent element has a defined height. Use h-screen to make elements span the entire viewport height. Use h-dvh to make elements span the entire viewport height, which also changes as the browser UI expands or contracts. Scroll up/down in the viewport to hide/show the browser UI: ## Example [Try it »](#) Use h-lvh to set the element's height to the maximum possible height of the viewport. This behaves the same as 100vh. Scroll up/down in the viewport to hide/show the browser UI: ## Example