Tailwind CSS中设定宽度和高度的方法
在 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）可轻松设置元素的宽高比。
通过组合这些类，可以灵活控制元素在不同场景下的尺寸表现。