在 Tailwind CSS 中，設定元素的寬度（width）和高度（height）有多種方式，涵蓋固定值、相對值、響應式調整等。以下是完整的方法分類及示例：
一、固定寬度 / 高度類
以?4px (0.25rem)?為單位遞增，適用于精確控制：
<!-- 寬度類 -->
w-0 /* 寬度: 0 */
w-px /* 寬度: 1px */
w-1 /* 寬度: 0.25rem (4px) */
w-2 /* 寬度: 0.5rem (8px) */
w-3 /* 寬度: 0.75rem (12px) */
w-4 /* 寬度: 1rem (16px) */
w-5 /* 寬度: 1.25rem (20px) */
w-6 /* 寬度: 1.5rem (24px) */
w-8 /* 寬度: 2rem (32px) */
w-10 /* 寬度: 2.5rem (40px) */
w-12 /* 寬度: 3rem (48px) */
w-16 /* 寬度: 4rem (64px) */
w-20 /* 寬度: 5rem (80px) */
w-24 /* 寬度: 6rem (96px) */
w-32 /* 寬度: 8rem (128px) */
w-40 /* 寬度: 10rem (160px) */
w-48 /* 寬度: 12rem (192px) */
w-56 /* 寬度: 14rem (224px) */
w-64 /* 寬度: 16rem (256px) */
w-72 /* 寬度: 18rem (288px) */
w-80 /* 寬度: 20rem (320px) */
w-96 /* 寬度: 24rem (384px) */<!-- 高度類 -->
h-0 /* 高度: 0 */
h-px /* 高度: 1px */
h-1 /* 高度: 0.25rem (4px) */
h-2 /* 高度: 0.5rem (8px) */
h-3 /* 高度: 0.75rem (12px) */
h-4 /* 高度: 1rem (16px) */
h-5 /* 高度: 1.25rem (20px) */
h-6 /* 高度: 1.5rem (24px) */
h-8 /* 高度: 2rem (32px) */
h-10 /* 高度: 2.5rem (40px) */
h-12 /* 高度: 3rem (48px) */
h-16 /* 高度: 4rem (64px) */
h-20 /* 高度: 5rem (80px) */
h-24 /* 高度: 6rem (96px) */
h-32 /* 高度: 8rem (128px) */
h-40 /* 高度: 10rem (160px) */
h-48 /* 高度: 12rem (192px) */
h-56 /* 高度: 14rem (224px) */
h-64 /* 高度: 16rem (256px) */
h-72 /* 高度: 18rem (288px) */
h-80 /* 高度: 20rem (320px) */
h-96 /* 高度: 24rem (384px) */
二、相對寬度 / 高度類
基于視口（viewport）、父元素或內容的百分比：
<!-- 寬度類 -->
w-auto /* 寬度由內容決定 */
w-full /* 100% 父元素寬度 */
w-screen /* 100% 視口寬度 */
w-min /* 最小內容寬度 */
w-max /* 最大內容寬度 */
w-fit /* 適應內容寬度 */<!-- 高度類 -->
h-auto /* 高度由內容決定 */
h-full /* 100% 父元素高度 */
h-screen /* 100% 視口高度 */
h-min /* 最小內容高度 */
h-max /* 最大內容高度 */
h-fit /* 適應內容高度 */
三、自定義寬度 / 高度（使用方括號）
支持任意數值或單位：
<!-- 自定義寬度 -->
w-[120px] /* 寬度: 120px */
w-[50%] /* 寬度: 50% 父元素 */
w-[3.5rem] /* 寬度: 3.5rem (56px) */
w-[calc(100%-80px)] /* 父元素寬度減去80px */<!-- 自定義高度 -->
h-[120px] /* 高度: 120px */
h-[50%] /* 高度: 50% 父元素 */
h-[3.5rem] /* 高度: 3.5rem (56px) */
h-[calc(100vh-80px)] /* 視口高度減去80px */
四、最小 / 最大寬度 / 高度類
限制元素的最小或最大尺寸：
<!-- 最小寬度 -->
min-w-0 /* 最小寬度: 0 */
min-w-full /* 最小寬度: 100% 父元素 */
min-w-[200px] /* 最小寬度: 200px */<!-- 最大寬度 -->
max-w-0 /* 最大寬度: 0 */
max-w-none /* 無最大寬度限制 */
max-w-xs /* 最大寬度: 20rem (320px) */
max-w-sm /* 最大寬度: 24rem (384px) */
max-w-md /* 最大寬度: 28rem (448px) */
max-w-lg /* 最大寬度: 32rem (512px) */
max-w-xl /* 最大寬度: 36rem (576px) */
max-w-2xl /* 最大寬度: 42rem (672px) */
max-w-3xl /* 最大寬度: 48rem (768px) */
max-w-4xl /* 最大寬度: 56rem (896px) */
max-w-5xl /* 最大寬度: 64rem (1024px) */
max-w-6xl /* 最大寬度: 72rem (1152px) */
max-w-7xl /* 最大寬度: 80rem (1280px) */
max-w-full /* 最大寬度: 100% 父元素 */
max-w-prose /* 最大寬度: 65ch (適合閱讀的寬度) */
max-w-[300px] /* 最大寬度: 300px */<!-- 最小高度 -->
min-h-0 /* 最小高度: 0 */
min-h-full /* 最小高度: 100% 父元素 */
min-h-screen /* 最小高度: 100% 視口 */
min-h-[200px] /* 最小高度: 200px */<!-- 最大高度 -->
max-h-0 /* 最大高度: 0 */
max-h-full /* 最大高度: 100% 父元素 */
max-h-screen /* 最大高度: 100% 視口 */
max-h-[300px] /* 最大高度: 300px */
max-h-min /* 最大高度為內容最小高度 */
max-h-max /* 最大高度為內容最大高度 */
max-h-fit /* 最大高度適應內容 */
五、響應式變體
通過前綴（如?md:w-32）在特定屏幕尺寸應用寬度 / 高度類：
<div class="w-16 md:w-32 lg:w-48"><!-- 在小屏幕寬度為64px，中屏幕為128px，大屏幕為192px -->
</div><div class="h-16 md:h-32 lg:h-auto"><!-- 在小屏幕高度為64px，中屏幕為128px，大屏幕自適應內容 -->
</div>
六、交互狀態變體
結合?hover:,?focus:,?active:?等前綴實現動態尺寸變化：
<div class="w-16 hover:w-20 transition-all"><!-- 懸停時寬度從64px變為80px -->
</div><button class="h-10 focus:h-12"><!-- 聚焦時高度從40px變為48px -->
</button>
七、常見組合示例
<!-- 固定尺寸卡片 -->
<div class="w-64 h-40 bg-blue-100">固定寬高</div><!-- 響應式布局 -->
<div class="w-full md:w-1/2 lg:w-1/3"><!-- 在小屏幕占滿寬度，中屏幕占1/2，大屏幕占1/3 -->
</div><!-- 自適應高度容器，最大為視口一半 -->
<div class="min-h-[100px] max-h-[50vh] overflow-auto">內容區</div><!-- 圖片容器，保持寬高比 -->
<div class="w-48 h-32 aspect-video bg-gray-200"><!-- 寬高比為16:9的容器 -->
</div>
八、注意事項
- 默認配置：Tailwind 提供的尺寸類基于默認主題配置，可通過?
tailwind.config.js?自定義。 - 與 Flex/Grid 結合：使用?
w-full/h-full?可讓子元素填滿父容器的寬 / 高。 - 性能提示：優先使用預定義類（如?
w-32）而非自定義值（如?w-[128px]），以利用 CSS 類復用。 - 寬高比：使用?
aspect-*?類（如?aspect-video）可輕松設置元素的寬高比。
通過組合這些類，可以靈活控制元素在不同場景下的尺寸表現。
