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>