Cirrus

#Width

Classes to set the width of an element.

ClassStyles
w-0
width: 0;
w-px
width: 1px;
w-auto
width: auto;
w-screen
width: 100vh;
w-10p
width: 10%;
w-20p
width: 20%;
w-30p
width: 30%;
w-40p
width: 40%;
w-50p
width: 50%;
w-60p
width: 60%;
w-70p
width: 70%;
w-80p
width: 80%;
w-90p
width: 90%;
w-100p
width: 100%;
w-1
width: 0.5rem
w-2
width: 1rem
w-3
width: 1.5rem
w-4
width: 2rem
w-5
width: 2.5rem
w-6
width: 3rem
w-8
width: 4rem
w-10
width: 5rem
w-12
width: 6rem
w-16
width: 8rem
w-20
width: 10rem
w-24
width: 12rem
w-32
width: 16rem
w-48
width: 24rem
w-64
width: 32rem
Supported Pseudo-Variants
New
0.8.0
active
checked
dark
disabled
first-of-type
focus
focus-visible
focus-within
group-focus
group-hover
hover
landscape
last-of-type
light
portrait
reduce-motion
responsive
visited

See more pseudo-variants.

#Scaled Widths

Updated
0.7.2

The w-{{value}}p classes gives an element a percentage based width.

w-20p
w-40p
w-60p
w-80p
<div>
    <div class="w-20p">...</div>
    <div class="w-40p">...</div>
    <div class="w-60p">...</div>
    <div class="w-80p">...</div>
</div>

#Absolute Widths

New
0.7.1

The w-{{value}} classes gives an element an absolute width.

w-8
w-16
w-24
w-32
<div>
    <div class="w-8">...</div>
    <div class="w-16">...</div>
    <div class="w-24">...</div>
    <div class="w-32">...</div>
</div>

#Screen Width

The w-screen class makes an element span the entire viewport.

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

#Auto

The w-auto class makes an element use a browser determined width. This is commonly used to unset a previously set width.

w-auto

<div>
    <div class="w-auto">...</div>
</div>

#Responsive

New
0.7.0

All utility classes mentioned here support viewport based application. All you need to do is add a <viewport>:<class> at the end of the class(es) you are using. For example, use md:w-50p to apply w-50p on medium screens and above.

<div class="md:w-50p">
    <!-- ... -->
</div>

For more information, visit the Viewports documentation.