Shorthand for width/min-width/max-width is .{bp}-{min|max}-w-{size}







Small Width

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

Large Width

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

Relative Width

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

Other Options

For 0 width, 1px width and auto

Size Class
width: 0; .w-0
width: 1px; .w-1px
width: auto; .w-auto