tailwindcss学习笔记之width、min-width、max-width

苦苦寻找的container原来归类在max-width里面，tailwindcss有container queries和breakpoints container 两种container。

1、width使用示例

1.1、width基本示例

使用 `w-<number>` 工具类像 `w-24` 和 `w-64` 等根据间距比例将元素设置为固定宽度：

<div class="w-96 ...">w-96</div>
<div class="w-80 ...">w-80</div>
<div class="w-64 ...">w-64</div>
<div class="w-48 ...">w-48</div>
<div class="w-40 ...">w-40</div>
<div class="w-32 ...">w-32</div>
<div class="w-24 ...">w-24</div>

`w-<number>` 计算的是 width: calc(var(--spacing) * <number>);  通过查询，我们发现默认主题变量中 --spacing 定义的是 4px:

--spacing: 4px;

所以默认 w-<number>的 宽度就是 number * 4。

1.2、Using a percentage 使用百分比

使用 `w-full` 或 `w-<fraction>` 工具类像 `w-1/2` 和 `w-2/5` 去设置元素基于百分比的宽度：

<div class="flex ...">
  <div class="w-1/2 ...">w-1/2</div>
  <div class="w-1/2 ...">w-1/2</div>
</div>
<div class="flex ...">
  <div class="w-2/5 ...">w-2/5</div>
  <div class="w-3/5 ...">w-3/5</div>
</div>
<div class="flex ...">
  <div class="w-1/3 ...">w-1/3</div>
  <div class="w-2/3 ...">w-2/3</div>
</div>
<div class="flex ...">
  <div class="w-1/4 ...">w-1/4</div>
  <div class="w-3/4 ...">w-3/4</div>
</div>
<div class="flex ...">
  <div class="w-1/5 ...">w-1/5</div>
  <div class="w-4/5 ...">w-4/5</div>
</div>
<div class="flex ...">
  <div class="w-1/6 ...">w-1/6</div>
  <div class="w-5/6 ...">w-5/6</div>
</div>
<div class="w-full ...">w-full</div>

1.3、Using the container scale 使用container的比例

<div class="w-xl ...">w-xl</div>
<div class="w-lg ...">w-lg</div>
<div class="w-md ...">w-md</div>
<div class="w-sm ...">w-sm</div>
<div class="w-xs ...">w-xs</div>
<div class="w-2xs ...">w-2xs</div>
<div class="w-3xs ...">w-3xs</div>

container 容器大小列表在上一篇最后查看：tailwindcss学习笔记之Responsive design

1.4、Matching the viewport 匹配视口大小

使用 `w-screen` 工具类使元素扩月视口的整个宽度：

<div class="w-screen">
  <!-- ... -->
</div>

或者，你可以使用 w-lvw，w-svw 和 w-dvw 工具类来匹配大、小或动态视口的宽度。

哈哈，暂时还不理解它的意思。

1.5、Resetting the width 重置宽度

使用 `w-auto` 工具类来在特定条件下删除元素的指定width，例如在特定断点处：

<div class="w-full md:w-auto">
  <!-- ... -->
</div>

哈哈，经过测试，也没测出来这个属性有什么用，感觉没什么变化。

1.6、Setting both width and height 同时设置宽度和高度

使用像 `size-px`，`size-4`，和 `size-full` 这样的工具类同时设置元素的宽度和高度：

<div class="size-16 ...">size-16</div>
<div class="size-20 ...">size-20</div>
<div class="size-24 ...">size-24</div>
<div class="size-32 ...">size-32</div>
<div class="size-40 ...">size-40</div>

解释：`size-16`的实际宽度是 4px * 16 = 16px

1.7、Using a custom value 使用自定义值

使用 `w-[value]`语法来设置完整的自定义值：

<div class="w-[5px] ...">
  <!-- ... -->
</div>

对于Css变量，可以使用 `w-(custom-property)` 语法：

<div class="w-(--my-width) ...">
  <!-- ... -->
</div>

这实际上是 `w-[var(<custom-property>)]` 语法的简写，自动为你加上了 `var()`方法。

1.8、Responsive design 响应式设计

参照上一篇关于响应式内容的介绍：

<div class="w-1/2 md:w-full ...">
  <!-- ... -->
</div>

2、width 工具类列表

2.1、只设置width的w工具类

还有dvw、lvw、lvh、svw、svh这几个，暂时不知道什么意思，就先不写了。

2.2、同时设置width和height的size工具类

同样的，size也有 dvw、dvh、lvw、lvh、svw、svh这几个暂时不知道什么意思的选项。

3、min-width工具类列表

同样，min-w还有dvw、dvh、lvw、lvh、svw、svh几种选项。

4、min-width使用示例

4.1、基本示例

<div class="w-20 ...">
  <div class="min-w-80 ...">min-w-80</div>
  <div class="min-w-64 ...">min-w-64</div>
  <div class="min-w-48 ...">min-w-48</div>
  <div class="min-w-40 ...">min-w-40</div>
  <div class="min-w-32 ...">min-w-32</div>
  <div class="min-w-24 ...">min-w-24</div>
</div>

4.2、Using a percentage 使用百分比

使用 `min-w-full` 或 `min-w-<fraction>` 这样的工具类，比如 `min-w-1/2` 和 `min-w-2/5` 来按百分比给元素设置宽度：

<div class="flex ...">
  <div class="min-w-3/4 ...">min-w-3/4</div>
  <div class="w-full ...">w-full</div>
</div>

4.3、Using the container scale 基于container比例设置

<div class="w-40 ...">
  <div class="min-w-lg ...">min-w-lg</div>
  <div class="min-w-md ...">min-w-md</div>
  <div class="min-w-sm ...">min-w-sm</div>
  <div class="min-w-xs ...">min-w-xs</div>
  <div class="min-w-2xs ...">min-w-2xs</div>
  <div class="min-w-3xs ...">min-w-3xs</div>
</div>

4.4、Using a custom value 使用自定义值

使用 `min-w-[<value>]` 语法基于完全自定义值去设置最小宽度：

<div class="min-w-[220px] ...">
  <!-- ... -->
</div>

对于Css变量，使用 `min-w-(<custom-property>)` 语法：

<div class="min-w-(--my-min-width) ...">
  <!-- ... -->
</div>

这种写法是 `min-w-[var(<custom-property>)]` 语法的简写，Tailwind自动为你加上 `var()` 函数。

4.5、Responsive design 响应式设计

<div class="w-24 min-w-full md:min-w-0 ...">
  <!-- ... -->
</div>

5、max-width 工具类列表

同样，max-w还有dvw、dvh、lvw、lvh、svw、svh几种选项。另外，最重要的min-width工具类里有一直在苦苦寻找的 container 这个选项。

container 的值：

width: 100%;
@media (width >= 40rem) { max-width: 40rem; }
@media (width >= 48rem) { max-width: 48rem; }
@media (width >= 64rem) { max-width: 64rem; }
@media (width >= 80rem) { max-width: 80rem; }
@media (width >= 96rem) { max-width: 96rem; }

6、max-width 使用示例

6.1、基本示例

使用 `` 原子类像 `` 和 `` 按照基于 spacing 比例的方式来设置固定的最大宽度：

<div class="w-full max-w-96 ...">max-w-96</div>
<div class="w-full max-w-80 ...">max-w-80</div>
<div class="w-full max-w-64 ...">max-w-64</div>
<div class="w-full max-w-48 ...">max-w-48</div>
<div class="w-full max-w-40 ...">max-w-40</div>
<div class="w-full max-w-32 ...">max-w-32</div>
<div class="w-full max-w-24 ...">max-w-24</div>

6.2、Using a percentage 使用百分比

使用 `max-full` 或 `max-w-<fraction>` 原子类 像 `max-w-1/2` 和 `max-w-2/5` 这样的给元素设置基于百分比的最大宽度：

<div class="w-full max-w-9/10 ...">max-w-9/10</div>
<div class="w-full max-w-3/4 ...">max-w-3/4</div>
<div class="w-full max-w-1/2 ...">max-w-1/2</div>
<div class="w-full max-w-1/3 ...">max-w-1/3</div>

6.3、Using the container scale 使用容器比例

使用像 `max-w-sm` 和 `max-w-xl` 这样的原子类按照基于 container比例的固定最大宽度：

<div class="max-w-md ...">
  <!-- ... -->
</div>

6.4、Using a custom value 使用自定义值

使用 `max-w-[<value>]` 语法 设置 基于完整自定义值的最大宽度：

<div class="max-w-[220px] ...">
  <!-- ... -->
</div>

对于Css变量，使用 `max-w-(<custom-property>)` 语法：

<div class="max-w-(--my-max-width) ...">
  <!-- ... -->
</div>

6.5、Responsive design 响应式设计

使用断点变体像 `md:` 前缀原子类设置 中等及以上屏幕宽度：

<div class="max-w-sm md:max-w-lg ...">
  <!-- ... -->
</div>

6.6、Using breakpoints container 使用断点container

使用 `container` 工具类设置元素的最大宽度，以匹配当前断点的最小宽度。如果你更喜欢设计一组固定的屏幕尺寸，而不是试顺应一个完全流动的窗口，这将非常有用：

<div class="container">
  <!-- ... -->
</div>

注意，不想其它的框架一样，Tailwind 的 container 不会自动居中，也没有水平边距。你可以使用 `mx-auto` 设置居中，使用 `px-<number>` 设置一个内边距：

<div class="container mx-auto px-4">
  <!-- ... -->
</div>