【Tailwind CSS】w-[14%] 和 w-[86%] 的用法详解

Tailwind CSS 是一个高度灵活的 CSS 框架，提供了丰富的工具类来帮助开发者快速构建响应式布局。在 Tailwind 中，w-[14%] 和 w-[86%] 是自定义宽度类，用于精确控制元素的宽度。本文将详细介绍 Tailwind CSS 中的 w-[14%] 和 w-[86%] 的用法，并展示如何在布局设计中应用这些宽度类。

一、Tailwind CSS 中的自定义宽度类

1. 自定义宽度的语法规则

在 Tailwind CSS 中，自定义宽度类可以使用 w-[value] 的格式，其中 value 可以是任何有效的 CSS 宽度单位，例如像素（px）、百分比（%）、视口宽度（vw）等。自定义宽度类适用于需要精确布局控制的场景，例如 w-[14%] 和 w-[86%]，它们表示宽度分别为容器的 14% 和 86%。

2. w-[14%] 和 w-[86%] 的特点和作用

• w-[14%]：将元素宽度设置为 14%，适用于页面布局中较小的部分，例如侧边栏、工具栏或小块信息展示区。
• w-[86%]：将元素宽度设置为 86%，通常用于内容展示区，可以占据页面较大的显示空间。

通过组合使用 w-[14%] 和 w-[86%]，可以轻松实现不同宽度比例的布局，例如侧边栏和内容区的布局分割。

二、w-[14%] 和 w-[86%] 的基本用法示例

以下示例展示了如何使用 w-[14%] 和 w-[86%] 创建一个左右分栏布局。左侧部分占据 14% 的宽度，右侧部分占据 86% 的宽度，形成不对称布局。

import React from "react";

export default function MyLayout() {
    return (
        <div className="h-screen flex">
            {/* 左侧区域 */}
            <div className="w-[14%] bg-red-200">l</div>
            {/* 右侧区域 */}
            <div className="w-[86%] bg-blue-200">r</div>
        </div>
    );
}

在这个示例中：

• w-[14%] 应用于左侧区域，使其宽度为父容器的 14%，适合作为侧边栏或导航栏。
• w-[86%] 应用于右侧区域，使其宽度为 86%，适合作为主要内容区域，确保主内容展示空间充足。

这种布局设计在信息展示类应用中尤为常见，特别是具有侧边栏的后台管理系统中。

三、w-[14%] 和 w-[86%] 的设计理念和应用场景

1. w-[14%] 的应用场景

w-[14%] 提供了小比例的宽度设置，适合以下应用场景：

• 侧边栏：在后台管理系统、信息展示平台等页面中，左侧可以用 w-[14%] 来放置导航栏或工具栏，提供简单的功能访问。
• 工具栏或快捷入口：在一些需要固定工具栏的布局中，14% 的宽度可以显示少量快捷入口和操作按钮，不会占用过多空间。

2. w-[86%] 的应用场景

w-[86%] 提供较大比例的宽度设置，适用于以下场景：

• 内容区：在左右分栏布局中，右侧可以用 w-[86%] 作为内容展示区，让用户更好地浏览内容。
• 主显示区域：在信息量较大的应用中，86% 的宽度提供足够的展示空间，可以用于文章、表单、数据报表等主要内容的显示。

3. 左右分栏布局的组合

通过 w-[14%] 和 w-[86%] 的组合，可以实现极为实用的左右分栏布局，让页面结构清晰易读。例如在电商网站后台中，左侧显示商品分类导航，右侧展示具体的商品信息。

四、实际应用场景解析

1. 后台管理系统中的侧边栏布局

在后台管理系统中，w-[14%] 和 w-[86%] 的组合可以有效组织内容。左侧为固定的导航栏，右侧用于展示可变的内容区。

<div className="h-screen flex">
    <div className="w-[14%] bg-gray-800 text-white p-4">Sidebar</div>
    <div className="w-[86%] bg-gray-100 p-6">Main Content Area</div>
</div>

在这个示例中：

• w-[14%] 左侧导航栏采用深色背景，与内容区区分开，增强视觉层次。
• w-[86%] 内容区采用浅色背景，主次分明，用户体验友好。

2. 响应式布局中的自定义宽度

在复杂的页面中，可以通过 Tailwind 的响应式前缀结合自定义宽度类，为不同屏幕尺寸设置适配宽度。例如，使用 lg:w-[14%] 和 lg:w-[86%] 为大屏设备指定宽度，而小屏设备下则使用 w-full 来实现自适应布局：

<div className="flex flex-wrap">
    <div className="w-full lg:w-[14%] bg-gray-200">Sidebar</div>
    <div className="w-full lg:w-[86%] bg-gray-100">Main Content</div>
</div>

在此示例中：

• 使用 lg: 前缀为大屏设备（lg 尺寸）设置左右宽度比例。
• 在小屏幕上则使用 w-full，即宽度占满屏幕，确保布局在各类设备上的一致性和可读性。

3. 表单布局中的信息分区

在一些需要分栏的表单布局中，使用 w-[14%] 和 w-[86%] 进行信息分区，可以让表单界面看起来更加简洁整齐。例如，左侧栏用于放置表单标签，右侧区域用于输入框：

<div className="flex items-center">
    <label className="w-[14%] text-gray-700">姓名：</label>
    <input type="text" className="w-[86%] p-2 border border-gray-300 rounded-md" />
</div>

在这个例子中：

• w-[14%] 用于左侧标签，占比适中，不会抢占主要输入区的空间。
• w-[86%] 用于输入框，提供足够的输入空间，让用户操作更加舒适。

五、w-[14%] 和 w-[86%] 的布局优势

1. 精确控制布局比例

自定义宽度类 w-[14%] 和 w-[86%] 提供了更精确的控制，可以为不同场景灵活定制。与 w-1/6、w-5/6 等固定比例类相比，14% 和 86% 的自定义宽度更具灵活性，满足特定布局需求。

2. 增强布局的适应性

通过使用自定义宽度类，开发者可以轻松调整布局以适应不同内容需求，提升页面的整体视觉体验。在信息展示区，宽度比例的定制可以使得内容展示更加合理。

3. 与其他 Tailwind 工具类的兼容性

Tailwind CSS 支持丰富的工具类组合，自定义宽度类 w-[14%] 和 w-[86%] 可以轻松与 flex、p-4、m-2、bg-* 等类配合使用，实现不同的布局效果。例如可以结合 rounded-md 和 shadow 类，实现带有圆角和阴影的区块展示。

六、注意事项

1. 使用自定义宽度的可维护性

自定义宽度类虽然灵活，但在大型项目中可能影响代码的可维护性。建议在适当场景使用自定义宽度，避免滥用。

2. 结合响应式设计

自定义宽度类在小屏设备上可能会影响布局，因此推荐使用响应式前缀（如 lg:）为大屏设备指定宽度，在小屏幕上采用 w-full 等全宽设计，确保良好的用户体验。

3. 避免极端比例设置

在自定义宽度设置中，过于极端的比例可能导致布局不协调。例如，将宽度设置为 w-[90%] 和 w-[10%] 可能导致左侧或右侧的空间不足，影响用户体验。

七、总结

w-[14%] 和 w-[86%] 是 Tailwind CSS 中的自定义宽度类，为开发者提供了灵活的布局控制方式，尤其适合用于左右分栏布局、内容分区等场景。通过这些自定义宽度类，开发者可以更加精确地定义页面布局比例，从而创造出更符合设计需求的用户界面。希望本文能帮助你更好地理解和使用 w-[14%] 和 w-[86%]，在实际项目中灵活运用 Tailwind CSS 提供的自定义宽度类，提升用户的视觉体验和交互感受。

推荐：

• JavaScript
• react
• vue

---