Width

用于设置页面元素的宽度的工具类

Class reference

Class Properties
.w-0 width: 0;
.w-1 width: 0.25rem;
.w-2 width: 0.5rem;
.w-3 width: 0.75rem;
.w-4 width: 1rem;
.w-5 width: 1.25rem;
.w-6 width: 1.5rem;
.w-8 width: 2rem;
.w-10 width: 2.5rem;
.w-12 width: 3rem;
.w-16 width: 4rem;
.w-20 width: 5rem;
.w-24 width: 6rem;
.w-32 width: 8rem;
.w-40 width: 10rem;
.w-48 width: 12rem;
.w-56 width: 14rem;
.w-64 width: 16rem;
.w-auto width: auto;
.w-px width: 1px;
.w-1/2 width: 50%;
.w-1/3 width: 33.333333%;
.w-2/3 width: 66.666667%;
.w-1/4 width: 25%;
.w-2/4 width: 50%;
.w-3/4 width: 75%;
.w-1/5 width: 20%;
.w-2/5 width: 40%;
.w-3/5 width: 60%;
.w-4/5 width: 80%;
.w-1/6 width: 16.666667%;
.w-2/6 width: 33.333333%;
.w-3/6 width: 50%;
.w-4/6 width: 66.666667%;
.w-5/6 width: 83.333333%;
.w-1/12 width: 8.333333%;
.w-2/12 width: 16.666667%;
.w-3/12 width: 25%;
.w-4/12 width: 33.333333%;
.w-5/12 width: 41.666667%;
.w-6/12 width: 50%;
.w-7/12 width: 58.333333%;
.w-8/12 width: 66.666667%;
.w-9/12 width: 75%;
.w-10/12 width: 83.333333%;
.w-11/12 width: 91.666667%;
.w-full width: 100%;
.w-screen width: 100vw;

自动计算宽度

使用 .w-auto 让浏览器计算并选择页面元素的宽度。

.w-auto on block element
.w-auto on inline-block element
<div class="w-auto ..."></div>
<div class="w-auto inline-block ..."></div>

屏幕宽度

使用 .w-screen 让页面元素的宽度与整个视口(viewport)的宽度相同。

<div class="w-screen bg-gray-400 h-4"></div>

固定宽度

使用 .w-{number}.w-px 为页面元素设置一个固定的宽度。

.w-0

.w-px

.w-1

.w-2

.w-3

.w-4

.w-5

.w-6

.w-8

.w-10

.w-12

.w-16

.w-20

.w-24

.w-32

.w-40

.w-48

.w-56

.w-64

<div class="w-0 ..."></div>
<div class="w-px ..."></div>
<div class="w-1 ..."></div>
<div class="w-2 ..."></div>
<div class="w-3 ..."></div>
<div class="w-4 ..."></div>
<div class="w-5 ..."></div>
<div class="w-6 ..."></div>
<div class="w-8 ..."></div>
<div class="w-10 ..."></div>
<div class="w-12 ..."></div>
<div class="w-16 ..."></div>
<div class="w-20 ..."></div>
<div class="w-24 ..."></div>
<div class="w-32 ..."></div>
<div class="w-40 ..."></div>
<div class="w-48 ..."></div>
<div class="w-56 ..."></div>
<div class="w-64 ..."></div>

可变宽度

使用 .w-{fraction}.w-full 为页面元素设置一个基于百分比的宽度。

.w-1/2
.w-1/2
.w-2/5
.w-3/5
.w-1/3
.w-2/3
.w-1/4
.w-3/4
.w-1/5
.w-4/5
.w-1/6
.w-5/6
.w-full
<div class="bg-gray-200 p-4">
  <div class="flex mb-4">
    <div class="w-1/2 p-2 bg-gray-400 text-center">.w-1/2</div>
    <div class="w-1/2 p-2 bg-gray-500 text-center">.w-1/2</div>
  </div>
  <div class="flex mb-4">
    <div class="w-2/5 p-2 bg-gray-400 text-center">.w-2/5</div>
    <div class="w-3/5 p-2 bg-gray-500 text-center">.w-3/5</div>
  </div>
  <div class="flex mb-4">
    <div class="w-1/3 p-2 bg-gray-400 text-center">.w-1/3</div>
    <div class="w-2/3 p-2 bg-gray-500 text-center">.w-2/3</div>
  </div>
  <div class="flex mb-4">
    <div class="w-1/4 p-2 bg-gray-400 text-center">.w-1/4</div>
    <div class="w-3/4 p-2 bg-gray-500 text-center">.w-3/4</div>
  </div>
  <div class="flex mb-4">
    <div class="w-1/5 p-2 bg-gray-400 text-center">.w-1/5</div>
    <div class="w-4/5 p-2 bg-gray-500 text-center">.w-4/5</div>
  </div>
  <div class="flex mb-4">
    <div class="w-1/6 p-2 bg-gray-400 text-center">.w-1/6</div>
    <div class="w-5/6 p-2 bg-gray-500 text-center">.w-5/6</div>
  </div>
  <div class="w-full p-2 bg-gray-400 text-center">.w-full</div>
</div>

响应式

To control the width of an element at a specific breakpoint, add a {screen}: prefix to any existing width utility. For example, adding the class md:w-full to an element would apply the w-full utility at medium screen sizes and above.

For more information about Tailwind's responsive design features, check out the Responsive Design documentation.

Responsive Element
Responsive Element
Responsive Element
Responsive Element
Responsive Element

定制

Width scale

By default, Tailwind's width scale is a combination of the default spacing scale as well as some additional values specific to widths.

You can customize the spacing scale for padding, margin, width, and height all at once in the theme.spacing or theme.extend.spacing sections of your tailwind.config.js file:

// tailwind.config.js
module.exports = {
theme: {
extend: {
spacing: {
+       '72': '18rem',
+       '84': '21rem',
+       '96': '24rem',
}
}
}
}

To customize width separately, use the theme.width section of your tailwind.config.js file.

// tailwind.config.js
module.exports = {
theme: {
extend: {
width: {
+       '1/7': '14.2857143%',
+       '2/7': '28.5714286%',
+       '3/7': '42.8571429%',
+       '4/7': '57.1428571%',
+       '5/7': '71.4285714%',
+       '6/7': '85.7142857%',
}
}
}
}

前往 定制主题 章节进一步了解定制默认主题的详细信息。

Responsive and pseudo-class variants

By default, only responsive variants are generated for width utilities.

You can control which variants are generated for the width utilities by modifying the width property in the variants section of your tailwind.config.js file.

For example, this config will also generate hover and focus variants:

// tailwind.config.js
module.exports = {
variants: {
    // ...
-   width: ['responsive'],
+   width: ['responsive', 'hover', 'focus'],
}
}

Disabling

If you don't plan to use the width utilities in your project, you can disable them entirely by setting the width property to false in the corePlugins section of your config file:

// tailwind.config.js
module.exports = {
corePlugins: {
    // ...
+   width: false,
}
}