Tailwind CSS 尺寸 #

<div class="w-0">宽度 0</div>
<div class="w-px">宽度 1px</div>
<div class="w-1">宽度 0.25rem (4px)</div>
<div class="w-4">宽度 1rem (16px)</div>
<div class="w-8">宽度 2rem (32px)</div>
<div class="w-16">宽度 4rem (64px)</div>
<div class="w-24">宽度 6rem (96px)</div>
<div class="w-32">宽度 8rem (128px)</div>
<div class="w-48">宽度 12rem (192px)</div>
<div class="w-64">宽度 16rem (256px)</div>
<div class="w-96">宽度 24rem (384px)</div>

<div class="w-1/2">宽度 50%</div>
<div class="w-1/3">宽度 33.333%</div>
<div class="w-2/3">宽度 66.666%</div>
<div class="w-1/4">宽度 25%</div>
<div class="w-3/4">宽度 75%</div>
<div class="w-1/5">宽度 20%</div>
<div class="w-2/5">宽度 40%</div>
<div class="w-3/5">宽度 60%</div>
<div class="w-4/5">宽度 80%</div>
<div class="w-full">宽度 100%</div>

<!-- 自动宽度 -->
<div class="w-auto">自动宽度</div>

<!-- 视口宽度 -->
<div class="w-screen">100vw</div>
<div class="w-svw">100svw（小视口宽度）</div>
<div class="w-lvw">100lvw（大视口宽度）</div>
<div class="w-dvw">100dvw（动态视口宽度）</div>

<!-- 最小内容宽度 -->
<div class="w-min">min-content</div>
<div class="w-max">max-content</div>
<div class="w-fit">fit-content</div>

<div class="w-[300px]">宽度 300px</div>
<div class="w-[50%]">宽度 50%</div>
<div class="w-[calc(100%-2rem)]">计算宽度</div>

<div class="h-0">高度 0</div>
<div class="h-px">高度 1px</div>
<div class="h-1">高度 0.25rem (4px)</div>
<div class="h-4">高度 1rem (16px)</div>
<div class="h-8">高度 2rem (32px)</div>
<div class="h-16">高度 4rem (64px)</div>
<div class="h-24">高度 6rem (96px)</div>
<div class="h-32">高度 8rem (128px)</div>
<div class="h-48">高度 12rem (192px)</div>
<div class="h-64">高度 16rem (256px)</div>
<div class="h-96">高度 24rem (384px)</div>

<div class="h-1/2">高度 50%</div>
<div class="h-1/3">高度 33.333%</div>
<div class="h-2/3">高度 66.666%</div>
<div class="h-1/4">高度 25%</div>
<div class="h-3/4">高度 75%</div>
<div class="h-full">高度 100%</div>

<!-- 自动高度 -->
<div class="h-auto">自动高度</div>

<!-- 视口高度 -->
<div class="h-screen">100vh</div>
<div class="h-svh">100svh（小视口高度）</div>
<div class="h-lvh">100lvh（大视口高度）</div>
<div class="h-dvh">100dvh（动态视口高度）</div>

<!-- 最小内容高度 -->
<div class="h-min">min-content</div>
<div class="h-max">max-content</div>
<div class="h-fit">fit-content</div>

<div class="h-[200px]">高度 200px</div>
<div class="h-[50%]">高度 50%</div>
<div class="h-[calc(100vh-4rem)]">计算高度</div>

<div class="min-w-0">最小宽度 0</div>
<div class="min-w-full">最小宽度 100%</div>
<div class="min-w-min">min-content</div>
<div class="min-w-max">max-content</div>
<div class="min-w-fit">fit-content</div>
<div class="min-w-[300px]">最小宽度 300px</div>

<div class="max-w-0">最大宽度 0</div>
<div class="max-w-xs">最大宽度 20rem (320px)</div>
<div class="max-w-sm">最大宽度 24rem (384px)</div>
<div class="max-w-md">最大宽度 28rem (448px)</div>
<div class="max-w-lg">最大宽度 32rem (512px)</div>
<div class="max-w-xl">最大宽度 36rem (576px)</div>
<div class="max-w-2xl">最大宽度 42rem (672px)</div>
<div class="max-w-3xl">最大宽度 48rem (768px)</div>
<div class="max-w-4xl">最大宽度 56rem (896px)</div>
<div class="max-w-5xl">最大宽度 64rem (1024px)</div>
<div class="max-w-6xl">最大宽度 72rem (1152px)</div>
<div class="max-w-7xl">最大宽度 80rem (1280px)</div>
<div class="max-w-full">最大宽度 100%</div>
<div class="max-w-min">min-content</div>
<div class="max-w-max">max-content</div>
<div class="max-w-fit">fit-content</div>
<div class="max-w-prose">65ch（适合阅读）</div>
<div class="max-w-screen-sm">640px</div>
<div class="max-w-screen-md">768px</div>
<div class="max-w-screen-lg">1024px</div>
<div class="max-w-screen-xl">1280px</div>
<div class="max-w-screen-2xl">1536px</div>
<div class="max-w-none">无限制</div>

<div class="min-h-0">最小高度 0</div>
<div class="min-h-full">最小高度 100%</div>
<div class="min-h-screen">最小高度 100vh</div>
<div class="min-h-svh">最小高度 100svh</div>
<div class="min-h-lvh">最小高度 100lvh</div>
<div class="min-h-dvh">最小高度 100dvh</div>
<div class="min-h-min">min-content</div>
<div class="min-h-max">max-content</div>
<div class="min-h-fit">fit-content</div>
<div class="min-h-[200px]">最小高度 200px</div>

<div class="max-h-0">最大高度 0</div>
<div class="max-h-px">最大高度 1px</div>
<div class="max-h-full">最大高度 100%</div>
<div class="max-h-screen">最大高度 100vh</div>
<div class="max-h-min">min-content</div>
<div class="max-h-max">max-content</div>
<div class="max-h-fit">fit-content</div>
<div class="max-h-none">无限制</div>
<div class="max-h-[300px]">最大高度 300px</div>

<div class="w-64 p-4 bg-white rounded-lg shadow">
  固定宽度 256px 的卡片
</div>

<div class="w-full md:w-1/2 lg:w-1/3 p-4">
  响应式宽度卡片
</div>

<div class="max-w-4xl mx-auto px-4">
  内容最大宽度 896px，水平居中
</div>

<div class="min-h-screen flex flex-col">
  <header class="h-16 bg-gray-100">头部</header>
  <main class="flex-1">主内容</main>
  <footer class="h-12 bg-gray-100">底部</footer>
</div>

<div class="flex min-h-screen">
  <aside class="w-64 flex-shrink-0 bg-gray-100">
    侧边栏
  </aside>
  <main class="flex-1">
    主内容
  </main>
</div>

<div class="w-32 h-32 bg-blue-500">
  正方形
</div>

<!-- 16:9 比例 -->
<div class="w-full aspect-video bg-gray-200">
  16:9 视频比例
</div>

<!-- 1:1 比例 -->
<div class="w-32 aspect-square bg-gray-200">
  正方形
</div>

<!-- 4:3 比例 -->
<div class="w-full aspect-[4/3] bg-gray-200">
  4:3 比例
</div>

<div class="h-64 overflow-y-auto">
  <div class="h-96 bg-gray-100">
    可滚动内容
  </div>
</div>

<div class="h-auto min-h-[200px] max-h-[500px] overflow-y-auto">
  高度在 200px 到 500px 之间，超出滚动
</div>