Width
Utilities for setting the width of an element
Default class reference
Class | Properties |
---|---|
w-0 | width: 0px; |
w-px | width: 1px; |
w-0.5 | width: 0.125rem; |
w-1 | width: 0.25rem; |
w-1.5 | width: 0.375rem; |
w-2 | width: 0.5rem; |
w-2.5 | width: 0.625rem; |
w-3 | width: 0.75rem; |
w-3.5 | width: 0.875rem; |
w-4 | width: 1rem; |
w-5 | width: 1.25rem; |
w-6 | width: 1.5rem; |
w-7 | width: 1.75rem; |
w-8 | width: 2rem; |
w-9 | width: 2.25rem; |
w-10 | width: 2.5rem; |
w-11 | width: 2.75rem; |
w-12 | width: 3rem; |
w-14 | width: 3.5rem; |
w-16 | width: 4rem; |
w-20 | width: 5rem; |
w-24 | width: 6rem; |
w-28 | width: 7rem; |
w-32 | width: 8rem; |
w-36 | width: 9rem; |
w-40 | width: 10rem; |
w-44 | width: 11rem; |
w-48 | width: 12rem; |
w-52 | width: 13rem; |
w-56 | width: 14rem; |
w-60 | width: 15rem; |
w-64 | width: 16rem; |
w-72 | width: 18rem; |
w-80 | width: 20rem; |
w-96 | width: 24rem; |
w-auto | width: auto; |
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-min | width: min-content; |
w-max | width: max-content; |
Auto
Use w-auto
to let the browser calculate and select the width for the element. You can use it to unset a specific width:
<div class="w-24 md:w-auto ..."></div>
Screen Width
Use w-screen
to make an element span the entire width of the viewport.
<div class="h-12 w-screen"></div>
Fixed Width
Use w-{number}
or w-px
to set an element to a fixed width.
<div>
<div class="w-8 ..."></div>
<div class="w-12 ..."></div>
<div class="w-16 ..."></div>
<div class="w-24 ..."></div>
</div>
Fluid Width
Use w-{fraction}
or w-full
to set an element to a percentage based width.
<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>
Responsive
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.
<div class="w-1/2 md:w-full ...">
<!-- ... -->
</div>
For more information about Tailwind’s responsive design features, check out the Responsive Design documentation.
Customizing
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%',
+ }
}
}
}
Learn more about customizing the default theme in the theme customization documentation.
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: {
extend: {
// ...
+ width: ['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,
}
}