Python私教张大鹏 Vue3整合Tailwindcss之min-width样式类

基本样式

基本样式总结

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>