基础样式
Class | Properties |
---|---|
w-0 | width: 0px; |
w-px | width: 1px; |
w-0.5 | width: 0.125rem; /* 2px */ |
w-1 | width: 0.25rem; /* 4px */ |
w-1.5 | width: 0.375rem; /* 6px */ |
w-2 | width: 0.5rem; /* 8px */ |
w-2.5 | width: 0.625rem; /* 10px */ |
w-3 | width: 0.75rem; /* 12px */ |
w-3.5 | width: 0.875rem; /* 14px */ |
w-4 | width: 1rem; /* 16px */ |
w-5 | width: 1.25rem; /* 20px */ |
w-6 | width: 1.5rem; /* 24px */ |
w-7 | width: 1.75rem; /* 28px */ |
w-8 | width: 2rem; /* 32px */ |
w-9 | width: 2.25rem; /* 36px */ |
w-10 | width: 2.5rem; /* 40px */ |
w-11 | width: 2.75rem; /* 44px */ |
w-12 | width: 3rem; /* 48px */ |
w-14 | width: 3.5rem; /* 56px */ |
w-16 | width: 4rem; /* 64px */ |
w-20 | width: 5rem; /* 80px */ |
w-24 | width: 6rem; /* 96px */ |
w-28 | width: 7rem; /* 112px */ |
w-32 | width: 8rem; /* 128px */ |
w-36 | width: 9rem; /* 144px */ |
w-40 | width: 10rem; /* 160px */ |
w-44 | width: 11rem; /* 176px */ |
w-48 | width: 12rem; /* 192px */ |
w-52 | width: 13rem; /* 208px */ |
w-56 | width: 14rem; /* 224px */ |
w-60 | width: 15rem; /* 240px */ |
w-64 | width: 16rem; /* 256px */ |
w-72 | width: 18rem; /* 288px */ |
w-80 | width: 20rem; /* 320px */ |
w-96 | width: 24rem; /* 384px */ |
w-auto | width: auto; |
w-1/2 | width: 50%; |
w-1/3 | width: 33.333333%; |
w-2/3 | width: 66.666667%; |
w-1/4 | width: 25%; |
w-2/4 | width: 50%; |
w-3/4 | width: 75%; |
w-1/5 | width: 20%; |
w-2/5 | width: 40%; |
w-3/5 | width: 60%; |
w-4/5 | width: 80%; |
w-1/6 | width: 16.666667%; |
w-2/6 | width: 33.333333%; |
w-3/6 | width: 50%; |
w-4/6 | width: 66.666667%; |
w-5/6 | width: 83.333333%; |
w-1/12 | width: 8.333333%; |
w-2/12 | width: 16.666667%; |
w-3/12 | width: 25%; |
w-4/12 | width: 33.333333%; |
w-5/12 | width: 41.666667%; |
w-6/12 | width: 50%; |
w-7/12 | width: 58.333333%; |
w-8/12 | width: 66.666667%; |
w-9/12 | width: 75%; |
w-10/12 | width: 83.333333%; |
w-11/12 | width: 91.666667%; |
w-full | width: 100%; |
w-screen | width: 100vw; |
w-svw | width: 100svw; |
w-lvw | width: 100lvw; |
w-dvw | width: 100dvw; |
w-min | width: min-content; |
w-max | width: max-content; |
w-fit | width: fit-content; |
基础样式总结
常用样式类:
- w-full:宽度是百分百
- w-screen:宽度是屏幕宽度
数字:
- 1到12是连续的
- 12到64是间隔4
百分比:2,3,4,5,6,12,支持百分比,比如1/3,1/6,1/12等。
案例:不同宽度的盒子
需求:创建一列,包含8个盒子,盒子的宽度从上到下越来越大,选择一种颜色,颜色也越来越深。
vue3示例:
html
<script setup>
</script>
<template>
<div class="flex flex-col bg-indigo-50 p-8 space-y-3">
<div class="h-12 bg-teal-100 w-12"></div>
<div class="h-12 bg-teal-200 w-20"></div>
<div class="h-12 bg-teal-300 w-28"></div>
<div class="h-12 bg-teal-400 w-36"></div>
<div class="h-12 bg-teal-500 w-44"></div>
<div class="h-12 bg-teal-600 w-52"></div>
<div class="h-12 bg-teal-700 w-60"></div>
<div class="h-12 bg-teal-800 w-72"></div>
</div>
</template>
案例:百分比宽度
需求:已知宽度支持2,3,4,5,6,12这六种百分比的形式。编写六行两列的盒子,每一行都使用百分比的形式,让盒子按照百分比的形式占据整行宽度。
vue3示例:
html
<script setup>
</script>
<template>
<div class="flex flex-wrap p-8 bg-indigo-50 space-y-3 space-y-reverse">
<div class="w-1/2 h-12 bg-teal-300 rounded"></div>
<div class="w-1/2 h-12 bg-purple-300 rounded"></div>
<div class="w-1/3 h-12 bg-teal-300 rounded"></div>
<div class="w-2/3 h-12 bg-purple-300 rounded"></div>
<div class="w-1/4 h-12 bg-teal-300 rounded"></div>
<div class="w-3/4 h-12 bg-purple-300 rounded"></div>
<div class="w-1/5 h-12 bg-teal-300 rounded"></div>
<div class="w-4/5 h-12 bg-purple-300 rounded"></div>
<div class="w-1/6 h-12 bg-teal-300 rounded"></div>
<div class="w-5/6 h-12 bg-purple-300 rounded"></div>
<div class="w-1/12 h-12 bg-teal-300 rounded"></div>
<div class="w-11/12 h-12 bg-purple-300 rounded"></div>
</div>
</template>
案例:屏幕宽高
需求:将整个屏幕可见的区域都设置成一种颜色。
vue3示例:
html
<script setup>
</script>
<template>
<div class="w-screen h-screen bg-teal-300">
</div>
</template>