Python私教张大鹏 Vue3整合Tailwindcss之min-width样式类
基本样式
| Class | Properties |
|---|---|
| min-w-0 | min-width: 0px; |
| min-w-1 | min-width: 0.25rem; /* 4px */ |
| min-w-2 | min-width: 0.5rem; /* 8px */ |
| min-w-3 | min-width: 0.75rem; /* 12px */ |
| min-w-4 | min-width: 1rem; /* 16px */ |
| min-w-5 | min-width: 1.25rem; /* 20px */ |
| min-w-6 | min-width: 1.5rem; /* 24px */ |
| min-w-7 | min-width: 1.75rem; /* 28px */ |
| min-w-8 | min-width: 2rem; /* 32px */ |
| min-w-9 | min-width: 2.25rem; /* 36px */ |
| min-w-10 | min-width: 2.5rem; /* 40px */ |
| min-w-11 | min-width: 2.75rem; /* 44px */ |
| min-w-12 | min-width: 3rem; /* 48px */ |
| min-w-14 | min-width: 3.5rem; /* 56px */ |
| min-w-16 | min-width: 4rem; /* 64px */ |
| min-w-20 | min-width: 5rem; /* 80px */ |
| min-w-24 | min-width: 6rem; /* 96px */ |
| min-w-28 | min-width: 7rem; /* 112px */ |
| min-w-32 | min-width: 8rem; /* 128px */ |
| min-w-36 | min-width: 9rem; /* 144px */ |
| min-w-40 | min-width: 10rem; /* 160px */ |
| min-w-44 | min-width: 11rem; /* 176px */ |
| min-w-48 | min-width: 12rem; /* 192px */ |
| min-w-52 | min-width: 13rem; /* 208px */ |
| min-w-56 | min-width: 14rem; /* 224px */ |
| min-w-60 | min-width: 15rem; /* 240px */ |
| min-w-64 | min-width: 16rem; /* 256px */ |
| min-w-72 | min-width: 18rem; /* 288px */ |
| min-w-80 | min-width: 20rem; /* 320px */ |
| min-w-96 | min-width: 24rem; /* 384px */ |
| min-w-px | min-width: 1px; |
| min-w-0.5 | min-width: 0.125rem; /* 2px */ |
| min-w-1.5 | min-width: 0.375rem; /* 6px */ |
| min-w-2.5 | min-width: 0.625rem; /* 10px */ |
| min-w-3.5 | min-width: 0.875rem; /* 14px */ |
| min-w-full | min-width: 100%; |
| min-w-min | min-width: min-content; |
| min-w-max | min-width: max-content; |
| min-w-fit | min-width: fit-content; |
基本样式总结
1到12是连续的数字，间隔1。
12到64间隔4。
最大的是96。
关键字是 min-w。
案例：不同宽度的盒子
需求：编写一列不同宽度的盒子，使用min-w定义最小宽度，熟悉一下min-w样式类的用法。
vue3示例：
<script setup>
</script>
<template>
<div class="flex flex-col space-y-3 bg-indigo-50">
<div class="h-12 bg-teal-100 min-w-12 w-0"></div>
<div class="h-12 bg-teal-200 min-w-16 w-0"></div>
<div class="h-12 bg-teal-300 min-w-20 w-0"></div>
<div class="h-12 bg-teal-400 min-w-24 w-0"></div>
<div class="h-12 bg-teal-500 min-w-28 w-0"></div>
<div class="h-12 bg-teal-600 min-w-32 w-0"></div>
<div class="h-12 bg-teal-700 min-w-36 w-0"></div>
<div class="h-12 bg-teal-800 min-w-40 w-0"></div>
<div class="h-12 bg-teal-900 min-w-44 w-0"></div>
</div>
</template>
