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

根本样式

ClassPropertiesmax-w-0max-width: 0px;max-w-pxmax-width: 1px;max-w-0.5max-width: 0.125rem; /* 2px */max-w-1max-width: 0.25rem; /* 4px */max-w-1.5max-width: 0.375rem; /* 6px */max-w-2max-width: 0.5rem; /* 8px */max-w-2.5max-width: 0.625rem; /* 10px */max-w-3max-width: 0.75rem; /* 12px */max-w-3.5max-width: 0.875rem; /* 14px */max-w-4max-width: 1rem; /* 16px */max-w-5max-width: 1.25rem; /* 20px */max-w-6max-width: 1.5rem; /* 24px */max-w-7max-width: 1.75rem; /* 28px */max-w-8max-width: 2rem; /* 32px */max-w-9max-width: 2.25rem; /* 36px */max-w-10max-width: 2.5rem; /* 40px */max-w-11max-width: 2.75rem; /* 44px */max-w-12max-width: 3rem; /* 48px */max-w-14max-width: 3.5rem; /* 56px */max-w-16max-width: 4rem; /* 64px */max-w-20max-width: 5rem; /* 80px */max-w-24max-width: 6rem; /* 96px */max-w-28max-width: 7rem; /* 112px */max-w-32max-width: 8rem; /* 128px */max-w-36max-width: 9rem; /* 144px */max-w-40max-width: 10rem; /* 160px */max-w-44max-width: 11rem; /* 176px */max-w-48max-width: 12rem; /* 192px */max-w-52max-width: 13rem; /* 208px */max-w-56max-width: 14rem; /* 224px */max-w-60max-width: 15rem; /* 240px */max-w-64max-width: 16rem; /* 256px */max-w-72max-width: 18rem; /* 288px */max-w-80max-width: 20rem; /* 320px */max-w-96max-width: 24rem; /* 384px */max-w-nonemax-width: none;max-w-xsmax-width: 20rem; /* 320px */max-w-smmax-width: 24rem; /* 384px */max-w-mdmax-width: 28rem; /* 448px */max-w-lgmax-width: 32rem; /* 512px */max-w-xlmax-width: 36rem; /* 576px */max-w-2xlmax-width: 42rem; /* 672px */max-w-3xlmax-width: 48rem; /* 768px */max-w-4xlmax-width: 56rem; /* 896px */max-w-5xlmax-width: 64rem; /* 1024px */max-w-6xlmax-width: 72rem; /* 1152px */max-w-7xlmax-width: 80rem; /* 1280px */max-w-fullmax-width: 100%;max-w-minmax-width: min-content;max-w-maxmax-width: max-content;max-w-fitmax-width: fit-content;max-w-prosemax-width: 65ch;max-w-screen-smmax-width: 640px;max-w-screen-mdmax-width: 768px;max-w-screen-lgmax-width: 1024px;max-w-screen-xlmax-width: 1280px;max-w-screen-2xlmax-width: 1536px; 根本样式总结

1到12是一连的数字，隔断1。
12到64隔断4。
最大的是96。
关键字是 max-w。
案例：差异宽度的盒子

需求：编写一列差异宽度的盒子，使用max-w界说最大宽度，认识一下max-w样式类的用法。
vue3示例：

1. <script setup>
2. </script>
3. <template>
4. <div class="flex flex-col p-8 bg-indigo-50 space-y-3">
5.   <div class="h-12 bg-fuchsia-100 w-screen max-w-12"></div>
6.   <div class="h-12 bg-fuchsia-200 w-screen max-w-16"></div>
7.   <div class="h-12 bg-fuchsia-300 w-screen max-w-20"></div>
8.   <div class="h-12 bg-fuchsia-400 w-screen max-w-24"></div>
9.   <div class="h-12 bg-fuchsia-500 w-screen max-w-28"></div>
10.   <div class="h-12 bg-fuchsia-600 w-screen max-w-32"></div>
11.   <div class="h-12 bg-fuchsia-700 w-screen max-w-36"></div>
12.   <div class="h-12 bg-fuchsia-800 w-screen max-w-40"></div>
13.   <div class="h-12 bg-fuchsia-900 w-screen max-w-44"></div>
14. </div>
15. </template>

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。