基本样式
| Class | Properties |
|---|---|
| max-h-0 | max-height: 0px; |
| max-h-px | max-height: 1px; |
| max-h-0.5 | max-height: 0.125rem; /* 2px */ |
| max-h-1 | max-height: 0.25rem; /* 4px */ |
| max-h-1.5 | max-height: 0.375rem; /* 6px */ |
| max-h-2 | max-height: 0.5rem; /* 8px */ |
| max-h-2.5 | max-height: 0.625rem; /* 10px */ |
| max-h-3 | max-height: 0.75rem; /* 12px */ |
| max-h-3.5 | max-height: 0.875rem; /* 14px */ |
| max-h-4 | max-height: 1rem; /* 16px */ |
| max-h-5 | max-height: 1.25rem; /* 20px */ |
| max-h-6 | max-height: 1.5rem; /* 24px */ |
| max-h-7 | max-height: 1.75rem; /* 28px */ |
| max-h-8 | max-height: 2rem; /* 32px */ |
| max-h-9 | max-height: 2.25rem; /* 36px */ |
| max-h-10 | max-height: 2.5rem; /* 40px */ |
| max-h-11 | max-height: 2.75rem; /* 44px */ |
| max-h-12 | max-height: 3rem; /* 48px */ |
| max-h-14 | max-height: 3.5rem; /* 56px */ |
| max-h-16 | max-height: 4rem; /* 64px */ |
| max-h-20 | max-height: 5rem; /* 80px */ |
| max-h-24 | max-height: 6rem; /* 96px */ |
| max-h-28 | max-height: 7rem; /* 112px */ |
| max-h-32 | max-height: 8rem; /* 128px */ |
| max-h-36 | max-height: 9rem; /* 144px */ |
| max-h-40 | max-height: 10rem; /* 160px */ |
| max-h-44 | max-height: 11rem; /* 176px */ |
| max-h-48 | max-height: 12rem; /* 192px */ |
| max-h-52 | max-height: 13rem; /* 208px */ |
| max-h-56 | max-height: 14rem; /* 224px */ |
| max-h-60 | max-height: 15rem; /* 240px */ |
| max-h-64 | max-height: 16rem; /* 256px */ |
| max-h-72 | max-height: 18rem; /* 288px */ |
| max-h-80 | max-height: 20rem; /* 320px */ |
| max-h-96 | max-height: 24rem; /* 384px */ |
| max-h-none | max-height: none; |
| max-h-full | max-height: 100%; |
| max-h-screen | max-height: 100vh; |
| max-h-svh | max-height: 100svh; |
| max-h-lvh | max-height: 100lvh; |
| max-h-dvh | max-height: 100dvh; |
| max-h-min | max-height: min-content; |
| max-h-max | max-height: max-content; |
| max-h-fit | max-height: fit-content; |
基本样式总结
1到12是连续的数字，间隔1。
12到64间隔4。
最大的是96。
案例：不同高度的盒子
需求：在一行显示多个盒子，并给这些盒子设置不同的高度。
vue3示例：
<script setup>
</script>
<template>
<div class="flex bg-indigo-50 space-x-3 p-8">
<div class="w-12 h-screen bg-indigo-500 max-h-12"></div>
<div class="w-12 h-screen bg-indigo-500 max-h-24"></div>
<div class="w-12 h-screen bg-indigo-500 max-h-32"></div>
<div class="w-12 h-screen bg-indigo-500 max-h-56"></div>
<div class="w-12 h-screen bg-indigo-500 max-h-64"></div>
<div class="w-12 h-screen bg-indigo-500 max-h-72"></div>
<div class="w-12 h-screen bg-indigo-500 max-h-80"></div>
<div class="w-12 h-screen bg-indigo-500 max-h-96"></div>
</div>
</template>
