Sizing utilities Tailwind CSS v4.1. Width (w-*, w-screen, w-full, w-auto), Height (h-*, h-screen, h-full, h-dvh NEW), Min/Max (min-w-*, max-w-*, min-h-*, max-h-*), Aspect ratio (aspect-video, aspect-square).
From fuse-tailwindcssnpx claudepluginhub fusengine/agents --plugin fuse-tailwindcssThis skill uses the workspace's default tool permissions.
references/constraints.mdreferences/width-height.mdGuides Next.js Cache Components and Partial Prerendering (PPR) with cacheComponents enabled. Implements 'use cache', cacheLife(), cacheTag(), revalidateTag(), static/dynamic optimization, and cache debugging.
Migrates code, prompts, and API calls from Claude Sonnet 4.0/4.5 or Opus 4.1 to Opus 4.5, updating model strings on Anthropic, AWS, GCP, Azure platforms.
Provides UI/UX resources: 50+ styles, color palettes, font pairings, guidelines, charts for web/mobile across React, Next.js, Vue, Svelte, Tailwind, React Native, Flutter. Aids planning, building, reviewing interfaces.
Comprehensive guide to sizing utilities in Tailwind CSS v4.1, including width, height, constraints, and aspect ratio controls.
w-0 - w-96: Fixed widths from 0 to 384pxw-full - 100% widthw-screen - 100% of viewport widthw-auto - Auto widthw-min - min-contentw-max - max-contentw-fit - fit-contentApply different widths at different breakpoints:
<div class="w-full md:w-1/2 lg:w-1/3">
Responsive width
</div>
h-0 - h-96: Fixed heights from 0 to 384pxh-full - 100% heighth-screen - 100% of viewport height (100vh)h-auto - Auto heighth-min - min-contenth-max - max-contenth-fit - fit-contenth-dvh - Dynamic viewport height (NEW in v4.1)The h-dvh utility uses the dynamic viewport height, which accounts for browser UI elements:
<div class="h-dvh">
Full dynamic viewport height
</div>
min-w-0 - min-width: 0min-w-full - min-width: 100%min-w-min - min-width: min-contentmin-w-max - min-width: max-contentmin-w-fit - min-width: fit-contentmax-w-none - max-width: nonemax-w-full - max-width: 100%max-w-screen-sm - Based on breakpointsmax-w-screen-mdmax-w-screen-lgmax-w-screen-xlmax-w-screen-2xlmin-h-0 - min-height: 0min-h-full - min-height: 100%min-h-screen - min-height: 100vhmin-h-min - min-height: min-contentmin-h-max - min-height: max-contentmin-h-fit - min-height: fit-contentmax-h-none - max-height: nonemax-h-full - max-height: 100%max-h-screen - max-height: 100vhmax-h-min - max-height: min-contentmax-h-max - max-height: max-contentmax-h-fit - max-height: fit-contentaspect-auto - autoaspect-square - 1 / 1aspect-video - 16 / 9<!-- 3:2 ratio -->
<div class="aspect-[3/2]">
Image container
</div>
<div class="w-screen h-dvh bg-white">
Full screen content
</div>
<div class="max-w-4xl mx-auto w-full px-4">
Content with max width and padding
</div>
<div class="w-full h-auto">
<img src="image.jpg" alt="description" class="w-full h-auto object-cover" />
</div>
<div class="w-full aspect-video bg-black">
<video src="video.mp4" class="w-full h-full"></video>
</div>
<div class="flex min-h-screen">
<aside class="w-64 h-screen overflow-auto">
Sidebar
</aside>
<main class="flex-1">
Content
</main>
</div>