Shorthand for width/min-width/max-width is .{bp}-{min|max}-w-{size}
Example:
.w-5
.min-w-5
.max-w-5
.md-max-w-5
.md-w-5
For Small width you can use .w-0 to .w-10
| Width Size | Class | Min/Max | Responsive |
width: 0.0rem;
|
.w-0
|
.{min|max}-w-0
|
.{bp}-w-0
|
width: 0.25rem;
|
.w-1
|
.{min|max}-w-1
|
.{bp}-w-1
|
width: 0.5rem;
|
.w-2
|
.{min|max}-w-2
|
.{bp}-w-2
|
width: 0.75rem;
|
.w-3
|
.{min|max}-w-3
|
.{bp}-w-3
|
width: 1.0rem;
|
.w-4
|
.{min|max}-w-4
|
.{bp}-w-4
|
width: 1.25rem;
|
.w-5
|
.{min|max}-w-5
|
.{bp}-w-5
|
width: 1.5rem;
|
.w-6
|
.{min|max}-w-6
|
.{bp}-w-6
|
width: 1.75rem;
|
.w-7
|
.{min|max}-w-7
|
.{bp}-w-7
|
width: 2.0rem;
|
.w-8
|
.{min|max}-w-8
|
.{bp}-w-8
|
width: 2.25rem;
|
.w-9
|
.{min|max}-w-9
|
.{bp}-w-9
|
width: 2.5rem;
|
.w-10
|
.{min|max}-w-10
|
.{bp}-w-10
|
For large width you can use .w-l1 to .w-l10 represents 1rem to 10rem
| Width Size | Class |
width: 1rem;
|
.w-l1
|
width: 2rem;
|
.w-l2
|
width: 3rem;
|
.w-l3
|
width: 4rem;
|
.w-l4
|
width: 5rem;
|
.w-l5
|
width: 6rem;
|
.w-l6
|
width: 7rem;
|
.w-l7
|
width: 8rem;
|
.w-l8
|
width: 9rem;
|
.w-l9
|
width: 10rem;
|
.w-l10
|
For relative width in percent or viewport width shorthand is pc and vw respectively
| Size | Class |
width: 10%;
|
.w-10pc
|
width: 20%;
|
.w-20pc
|
width: 25%;
|
.w-25pc
|
width: 30%;
|
.w-30pc
|
width: 33%;
|
.w-33pc
|
width: 40%;
|
.w-40pc
|
width: 50%;
|
.w-50pc
|
width: 60%;
|
.w-60pc
|
width: 66%;
|
.w-66pc
|
width: 70%;
|
.w-70pc
|
width: 75%;
|
.w-75pc
|
width: 80%;
|
.w-80pc
|
width: 90%;
|
.w-90pc
|
width: 100%;
|
.w-100pc
|
width: 25vw;
|
.w-25vw
|
width: 50vw;
|
.w-50vw
|
width: 75vw;
|
.w-75vw
|
width: 100vw;
|
.w-100vw
|
For 0 width, 1px width and auto
| Size | Class |
width: 0;
|
.w-0
|
width: 1px;
|
.w-1px
|
width: auto;
|
.w-auto
|