WHAT - Tailwind CSS 的数值机制

一、间距比例

查看 Tailwind CSS 的官方文档：Spacing

在使用 Tailwind CSS 时，py-、mr- 等类名后面跟的数值是基于 Tailwind CSS 的默认间距比例系统。默认情况下，这些数值是从 0 到 96 的倍数，单位是 rem（即基于根元素字体大小的相对单位）。

默认间距比例系统如下：

• 0 -> 0rem
• 1 -> 0.25rem
• 2 -> 0.5rem
• 3 -> 0.75rem
• 4 -> 1rem
• 5 -> 1.25rem
• 6 -> 1.5rem
• 8 -> 2rem
• 10 -> 2.5rem
• 12 -> 3rem
• 16 -> 4rem
• 20 -> 5rem
• 24 -> 6rem
• 32 -> 8rem
• 40 -> 10rem
• 48 -> 12rem
• 56 -> 14rem
• 64 -> 16rem
• 72 -> 18rem
• 80 -> 20rem
• 96 -> 24rem

你可以使用这些数值来控制元素的内边距（py-、px-、pt-、pr-、pb-、pl-）和外边距（my-、mx-、mt-、mr-、mb-、ml-）。

例如：

<div className="py-4 mr-8">
  <!-- 内容 -->
</div>

上面的示例中，py-4 表示上下内边距为 1rem，mr-8 表示右外边距为 2rem。

如果需要更精确的控制，可以自定义 Tailwind CSS 配置文件 (tailwind.config.js) 中的 spacing 选项。以下是一个示例：

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      spacing: {
        '1.5': '0.375rem', // 添加一个自定义间距值
        '2.5': '0.625rem',
      }
    }
  }
}

这样，你就可以使用 py-1.5 或 mr-2.5 等自定义间距值。

二、尺寸：宽高

查看 Tailwind CSS 的官方文档：Sizing - width

在 Tailwind CSS 中，w- 和 h- 类后面的数值同样遵循默认的尺寸比例系统，不过它们可以接受的值范围更广，包括百分比、视口单位、任意值等。

以下是一些常用的示例：

宽度 (w-)

• 固定值

  • w-0: 0rem
  • w-1: 0.25rem
  • w-2: 0.5rem
  • w-3: 0.75rem
  • w-4: 1rem
  • w-5: 1.25rem
  • w-6: 1.5rem
  • w-8: 2rem
  • w-10: 2.5rem
  • w-12: 3rem
  • w-16: 4rem
  • w-20: 5rem
  • w-24: 6rem
  • w-32: 8rem
  • w-40: 10rem
  • w-48: 12rem
  • w-56: 14rem
  • w-64: 16rem
  • w-72: 18rem
  • w-80: 20rem
  • w-96: 24rem

• 百分比

  • w-1/2: 50%
  • w-1/3: 33.333333%
  • w-2/3: 66.666667%
  • w-1/4: 25%
  • w-2/4: 50%
  • w-3/4: 75%
  • w-1/5: 20%
  • w-2/5: 40%
  • w-3/5: 60%
  • w-4/5: 80%
  • w-1/6: 16.666667%
  • w-2/6: 33.333333%
  • w-3/6: 50%
  • w-4/6: 66.666667%
  • w-5/6: 83.333333%
  • w-full: 100%
  • w-screen: 100vw

• 任意值

  • w-px: 1px
  • w-auto: auto

高度 (h-)

• 固定值

  • h-0: 0rem
  • h-1: 0.25rem
  • h-2: 0.5rem
  • h-3: 0.75rem
  • h-4: 1rem
  • h-5: 1.25rem
  • h-6: 1.5rem
  • h-8: 2rem
  • h-10: 2.5rem
  • h-12: 3rem
  • h-16: 4rem
  • h-20: 5rem
  • h-24: 6rem
  • h-32: 8rem
  • h-40: 10rem
  • h-48: 12rem
  • h-56: 14rem
  • h-64: 16rem
  • h-72: 18rem
  • h-80: 20rem
  • h-96: 24rem

• 百分比

  • h-1/2: 50%
  • h-1/3: 33.333333%
  • h-2/3: 66.666667%
  • h-1/4: 25%
  • h-2/4: 50%
  • h-3/4: 75%
  • h-full: 100%
  • h-screen: 100vh

• 任意值

  • h-px: 1px
  • h-auto: auto

示例用法

<div className="w-1/2 h-48 bg-blue-500">
  <!-- 内容 -->
</div>

上面的示例中，w-1/2 表示宽度为 50%，h-48 表示高度为 12rem。

你可以通过自定义 tailwind.config.js 来扩展或修改这些默认值：

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      width: {
        '128': '32rem', // 添加自定义宽度
      },
      height: {
        '128': '32rem', // 添加自定义高度
      },
    }
  }
}

这样，你就可以使用 w-128 和 h-128 等自定义值了。

三、尺寸：最大宽高

查看 Tailwind CSS 的官方文档：Sizing - MinWidth

在 Tailwind CSS 中，w- 和 h- 定义的是元素的宽度和高度，而 min-w-、max-w-、min-h- 和 max-h- 则用于设置元素的最小和最大宽度、高度。这些类用于控制元素在布局中的尺寸限制。

以下是它们的区别和常见使用方式：

min-w- 和 max-w-

• min-w-：设置元素的最小宽度，元素宽度不会小于这个值。
• max-w-：设置元素的最大宽度，元素宽度不会大于这个值。

min-h- 和 max-h-

• min-h-：设置元素的最小高度，元素高度不会小于这个值。
• max-h-：设置元素的最大高度，元素高度不会大于这个值。

常用类名

min-w-

<div className="min-w-0"></div> <!-- 没有最小宽度限制 -->
<div className="min-w-full"></div> <!-- 最小宽度为 100% -->
<div className="min-w-min"></div> <!-- 内容最小宽度 -->
<div className="min-w-max"></div> <!-- 内容最大宽度 -->
<div className="min-w-fit"></div> <!-- 自适应内容宽度 -->

max-w-

<div className="max-w-xs"></div> <!-- 最大宽度为 20rem -->
<div className="max-w-sm"></div> <!-- 最大宽度为 24rem -->
<div className="max-w-md"></div> <!-- 最大宽度为 28rem -->
<div className="max-w-lg"></div> <!-- 最大宽度为 32rem -->
<div className="max-w-xl"></div> <!-- 最大宽度为 36rem -->
<div className="max-w-2xl"></div> <!-- 最大宽度为 42rem -->
<div className="max-w-3xl"></div> <!-- 最大宽度为 48rem -->
<div className="max-w-4xl"></div> <!-- 最大宽度为 56rem -->
<div className="max-w-5xl"></div> <!-- 最大宽度为 64rem -->
<div className="max-w-6xl"></div> <!-- 最大宽度为 72rem -->
<div className="max-w-full"></div> <!-- 最大宽度为 100% -->
<div className="max-w-screen-sm"></div> <!-- 最大宽度为 640px -->
<div className="max-w-screen-md"></div> <!-- 最大宽度为 768px -->
<div className="max-w-screen-lg"></div> <!-- 最大宽度为 1024px -->
<div className="max-w-screen-xl"></div> <!-- 最大宽度为 1280px -->

min-h-

<div className="min-h-0"></div> <!-- 没有最小高度限制 -->
<div className="min-h-full"></div> <!-- 最小高度为 100% -->
<div className="min-h-screen"></div> <!-- 最小高度为 100vh -->

max-h-

<div className="max-h-0"></div> <!-- 最大高度为 0 -->
<div className="max-h-full"></div> <!-- 最大高度为 100% -->
<div className="max-h-screen"></div> <!-- 最大高度为 100vh -->

使用示例

固定宽度和高度

<div className="w-64 h-32 bg-gray-200">
  <!-- 内容 -->
</div>

最小和最大宽度

<div className="min-w-full max-w-sm bg-gray-200">
  <!-- 内容 -->
</div>

最小和最大高度

<div className="min-h-screen max-h-64 bg-gray-200">
  <!-- 内容 -->
</div>

在这个示例中，元素的宽度不能小于其父元素的宽度，但也不能超过 24rem（max-w-sm），高度不能小于视口高度（min-h-screen），但也不能超过 16rem（max-h-64）。

综合示例

<div className="container mx-auto p-4">
  <div className="min-w-full max-w-2xl min-h-screen max-h-96 bg-blue-100 p-4">
    <!-- 内容 -->
  </div>
</div>

在这个示例中：

• 容器的最小宽度为 100%，最大宽度为 42rem（max-w-2xl）。
• 容器的最小高度为视口高度（min-h-screen），最大高度为 24rem（max-h-96）。

这些类使你可以精确控制元素的尺寸，确保它们在各种屏幕尺寸和布局条件下表现良好。

四、响应式设计

查看 Tailwind CSS 的官方文档：Responsive Design

Breakpoint prefix

在 Tailwind CSS 中，sm:、md:、lg:、xl: 和 2xl: 这些前缀通常用于响应式设计，以定义不同屏幕尺寸下的样式。具体来说，它们代表以下屏幕断点：

• -sm：适用于小屏幕（min-width: 640px），@media (min-width: 640px) { ... }
• -md：适用于中等屏幕（min-width: 768px），@media (min-width: 768px) { ... }
• -lg：适用于大屏幕（min-width: 1024px），@media (min-width: 1024px) { ... }
• -xl：适用于超大屏幕（min-width: 1280px），@media (min-width: 1280px) { ... }
• -2xl：适用于超超大屏幕（min-width: 1536px），@media (min-width: 1536px) { ... }

你可以使用这些前缀来定义在不同屏幕尺寸下的样式。例如：

<div className="w-full sm:w-1/2 md:w-1/3 lg:w-1/4 xl:w-1/5 2xl:w-1/6">
  <!-- 内容 -->
</div>

在这个示例中：

• 在所有屏幕尺寸下，宽度为 100%（w-full）。
• 在小屏幕及更大屏幕下，宽度为 50%（sm:w-1/2）。
• 在中等屏幕及更大屏幕下，宽度为 33.333333%（md:w-1/3）。
• 在大屏幕及更大屏幕下，宽度为 25%（lg:w-1/4）。
• 在超大屏幕及更大屏幕下，宽度为 20%（xl:w-1/5）。
• 在超超大屏幕及更大屏幕下，宽度为 16.666667%（2xl:w-1/6）。

配置

你可以在 tailwind.config.js 文件中自定义这些断点：

// tailwind.config.js
module.exports = {
  theme: {
    screens: {
      'sm': '640px',
      'md': '768px',
      'lg': '1024px',
      'xl': '1280px',
      '2xl': '1536px',
      // 自定义断点
      '3xl': '1920px',
    },
  },
};

这样，你就可以使用自定义的 3xl 断点来定义在更大屏幕尺寸下的样式了。

场景

这些实际上可以用在几乎所有 Tailwind CSS 类中，以便为不同的屏幕尺寸设置不同的样式。这种使用方法基于 Tailwind CSS 的响应式设计原则。

以下是一些常见的应用场景和示例：

1. 布局相关类

<div className="p-4 sm:p-6 md:p-8 lg:p-10 xl:p-12 2xl:p-16">
  <!-- 内容 -->
</div>

在这个示例中，不同屏幕尺寸下内边距（padding）会有所不同。

2. 尺寸相关类

<div className="w-full sm:w-1/2 md:w-1/3 lg:w-1/4 xl:w-1/5 2xl:w-1/6">
  <!-- 内容 -->
</div>

在这个示例中，不同屏幕尺寸下宽度会有所不同。

3. 文字相关类

<p className="text-base sm:text-lg md:text-xl lg:text-2xl xl:text-3xl 2xl:text-4xl">
  响应式文本
</p>

在这个示例中，不同屏幕尺寸下字体大小会有所不同。

4. 间距相关类

<div className="mt-4 sm:mt-6 md:mt-8 lg:mt-10 xl:mt-12 2xl:mt-16">
  <!-- 内容 -->
</div>

在这个示例中，不同屏幕尺寸下上外边距（margin-top）会有所不同。

5. 背景颜色

<div className="bg-gray-100 sm:bg-blue-100 md:bg-green-100 lg:bg-red-100 xl:bg-yellow-100 2xl:bg-purple-100">
  <!-- 内容 -->
</div>

在这个示例中，不同屏幕尺寸下背景颜色会有所不同。

6. Flexbox 和 Grid 类

<div className="flex flex-col sm:flex-row md:flex-wrap lg:flex-nowrap xl:flex-row-reverse 2xl:flex-col-reverse">
  <!-- 内容 -->
</div>

在这个示例中，不同屏幕尺寸下 flex 布局会有所不同。

综合示例

<div className="container mx-auto p-4">
  <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 gap-4">
    <div className="bg-gray-300 h-24"></div>
    <div className="bg-gray-300 h-24"></div>
    <div className="bg-gray-300 h-24"></div>
    <div className="bg-gray-300 h-24"></div>
    <div className="bg-gray-300 h-24"></div>
    <div className="bg-gray-300 h-24"></div>
  </div>
</div>

在这个示例中，不同屏幕尺寸下网格列数会有所不同。