Width

Set the width for an element.

Widely available

This feature is well established and works across many devices and browser versions.

Chrome
Edge
Firefox
Safari

w-0
width: 0;
w-1
width: .25rem;
w-2
width: .5rem;
w-3
width: .75rem;
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-13
width: 3.25rem;
w-14
width: 3.5rem;
w-15
width: 3.75rem;
w-16
width: 4rem;
w-17
width: 4.25rem;
w-18
width: 4.5rem;
w-19
width: 4.75rem;
w-20
width: 5rem;
w-21
width: 5.25rem;
w-22
width: 5.5rem;
w-23
width: 5.75rem;
w-24
width: 6rem;
w-25
width: 6.25rem;
w-26
width: 6.5rem;
w-27
width: 6.75rem;
w-28
width: 7rem;
w-29
width: 7.25rem;
w-30
width: 7.5rem;
w-31
width: 7.75rem;
w-32
width: 8rem;
w-33
width: 8.25rem;
w-34
width: 8.5rem;
w-35
width: 8.75rem;
w-36
width: 9rem;
w-37
width: 9.25rem;
w-38
width: 9.5rem;
w-39
width: 9.75rem;
w-40
width: 10rem;
w-41
width: 10.25rem;
w-42
width: 10.5rem;
w-43
width: 10.75rem;
w-44
width: 11rem;
w-45
width: 11.25rem;
w-46
width: 11.5rem;
w-47
width: 11.75rem;
w-48
width: 12rem;
w-49
width: 12.25rem;
w-50
width: 12.5rem;
w-51
width: 12.75rem;
w-52
width: 13rem;
w-53
width: 13.25rem;
w-54
width: 13.5rem;
w-55
width: 13.75rem;
w-56
width: 14rem;
w-57
width: 14.25rem;
w-58
width: 14.5rem;
w-59
width: 14.75rem;
w-60
width: 15rem;
w-61
width: 15.25rem;
w-62
width: 15.5rem;
w-63
width: 15.75rem;
w-64
width: 16rem;
w-65
width: 16.25rem;
w-66
width: 16.5rem;
w-67
width: 16.75rem;
w-68
width: 17rem;
w-69
width: 17.25rem;
w-70
width: 17.5rem;
w-71
width: 17.75rem;
w-72
width: 18rem;
w-73
width: 18.25rem;
w-74
width: 18.5rem;
w-75
width: 18.75rem;
w-76
width: 19rem;
w-77
width: 19.25rem;
w-78
width: 19.5rem;
w-79
width: 19.75rem;
w-80
width: 20rem;
w-81
width: 20.25rem;
w-82
width: 20.5rem;
w-83
width: 20.75rem;
w-84
width: 21rem;
w-85
width: 21.25rem;
w-86
width: 21.5rem;
w-87
width: 21.75rem;
w-88
width: 22rem;
w-89
width: 22.25rem;
w-90
width: 22.5rem;
w-91
width: 22.75rem;
w-92
width: 23rem;
w-93
width: 23.25rem;
w-94
width: 23.5rem;
w-95
width: 23.75rem;
w-96
width: 24rem;
w-97
width: 24.25rem;
w-98
width: 24.5rem;
w-99
width: 24.75rem;
w-100
width: 25rem;
w-101
width: 25.25rem;
w-102
width: 25.5rem;
w-103
width: 25.75rem;
w-104
width: 26rem;
w-105
width: 26.25rem;
w-106
width: 26.5rem;
w-107
width: 26.75rem;
w-108
width: 27rem;
w-109
width: 27.25rem;
w-110
width: 27.5rem;
w-111
width: 27.75rem;
w-112
width: 28rem;
w-113
width: 28.25rem;
w-114
width: 28.5rem;
w-115
width: 28.75rem;
w-116
width: 29rem;
w-117
width: 29.25rem;
w-118
width: 29.5rem;
w-119
width: 29.75rem;
w-120
width: 30rem;
w-121
width: 30.25rem;
w-122
width: 30.5rem;
w-123
width: 30.75rem;
w-124
width: 31rem;
w-125
width: 31.25rem;
w-126
width: 31.5rem;
w-127
width: 31.75rem;
w-128
width: 32rem;
w-129
width: 32.25rem;
w-130
width: 32.5rem;
w-131
width: 32.75rem;
w-132
width: 33rem;
w-133
width: 33.25rem;
w-134
width: 33.5rem;
w-135
width: 33.75rem;
w-136
width: 34rem;
w-137
width: 34.25rem;
w-138
width: 34.5rem;
w-139
width: 34.75rem;
w-140
width: 35rem;
w-141
width: 35.25rem;
w-142
width: 35.5rem;
w-143
width: 35.75rem;
w-144
width: 36rem;
w-145
width: 36.25rem;
w-146
width: 36.5rem;
w-147
width: 36.75rem;
w-148
width: 37rem;
w-149
width: 37.25rem;
w-150
width: 37.5rem;
w-151
width: 37.75rem;
w-152
width: 38rem;
w-153
width: 38.25rem;
w-154
width: 38.5rem;
w-155
width: 38.75rem;
w-156
width: 39rem;
w-157
width: 39.25rem;
w-158
width: 39.5rem;
w-159
width: 39.75rem;
w-160
width: 40rem;
w-161
width: 40.25rem;
w-162
width: 40.5rem;
w-163
width: 40.75rem;
w-164
width: 41rem;
w-165
width: 41.25rem;
w-166
width: 41.5rem;
w-167
width: 41.75rem;
w-168
width: 42rem;
w-169
width: 42.25rem;
w-170
width: 42.5rem;
w-171
width: 42.75rem;
w-172
width: 43rem;
w-173
width: 43.25rem;
w-174
width: 43.5rem;
w-175
width: 43.75rem;
w-176
width: 44rem;
w-177
width: 44.25rem;
w-178
width: 44.5rem;
w-179
width: 44.75rem;
w-180
width: 45rem;
w-181
width: 45.25rem;
w-182
width: 45.5rem;
w-183
width: 45.75rem;
w-184
width: 46rem;
w-185
width: 46.25rem;
w-186
width: 46.5rem;
w-187
width: 46.75rem;
w-188
width: 47rem;
w-189
width: 47.25rem;
w-190
width: 47.5rem;
w-191
width: 47.75rem;
w-192
width: 48rem;
w-193
width: 48.25rem;
w-194
width: 48.5rem;
w-195
width: 48.75rem;
w-196
width: 49rem;
w-197
width: 49.25rem;
w-198
width: 49.5rem;
w-199
width: 49.75rem;
w-200
width: 50rem;
w-201
width: 50.25rem;
w-202
width: 50.5rem;
w-203
width: 50.75rem;
w-204
width: 51rem;
w-205
width: 51.25rem;
w-206
width: 51.5rem;
w-207
width: 51.75rem;
w-208
width: 52rem;
w-209
width: 52.25rem;
w-210
width: 52.5rem;
w-211
width: 52.75rem;
w-212
width: 53rem;
w-213
width: 53.25rem;
w-214
width: 53.5rem;
w-215
width: 53.75rem;
w-216
width: 54rem;
w-217
width: 54.25rem;
w-218
width: 54.5rem;
w-219
width: 54.75rem;
w-220
width: 55rem;
w-221
width: 55.25rem;
w-222
width: 55.5rem;
w-223
width: 55.75rem;
w-224
width: 56rem;
w-225
width: 56.25rem;
w-226
width: 56.5rem;
w-227
width: 56.75rem;
w-228
width: 57rem;
w-229
width: 57.25rem;
w-230
width: 57.5rem;
w-231
width: 57.75rem;
w-232
width: 58rem;
w-233
width: 58.25rem;
w-234
width: 58.5rem;
w-235
width: 58.75rem;
w-236
width: 59rem;
w-237
width: 59.25rem;
w-238
width: 59.5rem;
w-239
width: 59.75rem;
w-240
width: 60rem;
w-241
width: 60.25rem;
w-242
width: 60.5rem;
w-243
width: 60.75rem;
w-244
width: 61rem;
w-245
width: 61.25rem;
w-246
width: 61.5rem;
w-247
width: 61.75rem;
w-248
width: 62rem;
w-249
width: 62.25rem;
w-250
width: 62.5rem;
w-251
width: 62.75rem;
w-252
width: 63rem;
w-253
width: 63.25rem;
w-254
width: 63.5rem;
w-255
width: 63.75rem;
w-256
width: 64rem;
w-257
width: 64.25rem;
w-258
width: 64.5rem;
w-259
width: 64.75rem;
w-260
width: 65rem;
w-261
width: 65.25rem;
w-262
width: 65.5rem;
w-263
width: 65.75rem;
w-264
width: 66rem;
w-265
width: 66.25rem;
w-266
width: 66.5rem;
w-267
width: 66.75rem;
w-268
width: 67rem;
w-269
width: 67.25rem;
w-270
width: 67.5rem;
w-271
width: 67.75rem;
w-272
width: 68rem;
w-273
width: 68.25rem;
w-274
width: 68.5rem;
w-275
width: 68.75rem;
w-276
width: 69rem;
w-277
width: 69.25rem;
w-278
width: 69.5rem;
w-279
width: 69.75rem;
w-280
width: 70rem;
w-281
width: 70.25rem;
w-282
width: 70.5rem;
w-283
width: 70.75rem;
w-284
width: 71rem;
w-285
width: 71.25rem;
w-286
width: 71.5rem;
w-287
width: 71.75rem;
w-288
width: 72rem;
w-289
width: 72.25rem;
w-290
width: 72.5rem;
w-291
width: 72.75rem;
w-292
width: 73rem;
w-293
width: 73.25rem;
w-294
width: 73.5rem;
w-295
width: 73.75rem;
w-296
width: 74rem;
w-297
width: 74.25rem;
w-298
width: 74.5rem;
w-299
width: 74.75rem;
w-300
width: 75rem;
w-301
width: 75.25rem;
w-302
width: 75.5rem;
w-303
width: 75.75rem;
w-304
width: 76rem;
w-305
width: 76.25rem;
w-306
width: 76.5rem;
w-307
width: 76.75rem;
w-308
width: 77rem;
w-309
width: 77.25rem;
w-310
width: 77.5rem;
w-311
width: 77.75rem;
w-312
width: 78rem;
w-313
width: 78.25rem;
w-314
width: 78.5rem;
w-315
width: 78.75rem;
w-316
width: 79rem;
w-317
width: 79.25rem;
w-318
width: 79.5rem;
w-319
width: 79.75rem;
w-320
width: 80rem;
w-321
width: 80.25rem;
w-322
width: 80.5rem;
w-323
width: 80.75rem;
w-324
width: 81rem;
w-325
width: 81.25rem;
w-326
width: 81.5rem;
w-327
width: 81.75rem;
w-328
width: 82rem;
w-329
width: 82.25rem;
w-330
width: 82.5rem;
w-331
width: 82.75rem;
w-332
width: 83rem;
w-333
width: 83.25rem;
w-334
width: 83.5rem;
w-335
width: 83.75rem;
w-336
width: 84rem;
w-337
width: 84.25rem;
w-338
width: 84.5rem;
w-339
width: 84.75rem;
w-340
width: 85rem;
w-341
width: 85.25rem;
w-342
width: 85.5rem;
w-343
width: 85.75rem;
w-344
width: 86rem;
w-345
width: 86.25rem;
w-346
width: 86.5rem;
w-347
width: 86.75rem;
w-348
width: 87rem;
w-349
width: 87.25rem;
w-350
width: 87.5rem;
w-351
width: 87.75rem;
w-352
width: 88rem;
w-353
width: 88.25rem;
w-354
width: 88.5rem;
w-355
width: 88.75rem;
w-356
width: 89rem;
w-357
width: 89.25rem;
w-358
width: 89.5rem;
w-359
width: 89.75rem;
w-360
width: 90rem;
w-361
width: 90.25rem;
w-362
width: 90.5rem;
w-363
width: 90.75rem;
w-364
width: 91rem;
w-365
width: 91.25rem;
w-366
width: 91.5rem;
w-367
width: 91.75rem;
w-368
width: 92rem;
w-369
width: 92.25rem;
w-370
width: 92.5rem;
w-371
width: 92.75rem;
w-372
width: 93rem;
w-373
width: 93.25rem;
w-374
width: 93.5rem;
w-375
width: 93.75rem;
w-376
width: 94rem;
w-377
width: 94.25rem;
w-378
width: 94.5rem;
w-379
width: 94.75rem;
w-380
width: 95rem;
w-381
width: 95.25rem;
w-382
width: 95.5rem;
w-383
width: 95.75rem;
w-384
width: 96rem;
w-10%
width: 10%;
w-20%
width: 20%;
w-30%
width: 30%;
w-40%
width: 40%;
w-50%
width: 50%;
w-60%
width: 60%;
w-70%
width: 70%;
w-80%
width: 80%;
w-90%
width: 90%;
w-100%
width: 100%;
w-auto
width: auto;
w-dvh
width: 100dvh;
w-dvw
width: 100dvw;
w-fc
width: fit-content;
w-lg
width: 64rem;
w-lvh
width: 100lvh;
w-lvw
width: 100lvw;
w-max
width: max-content;
w-md
width: 48rem;
w-min
width: min-content;
w-px
width: 1px;
w-s
width: stretch;
w-sm
width: 40rem;
w-svh
width: 100svh;
w-svw
width: 100svw;
w-vb
width: 100vb;
w-vh
width: 100vh;
w-vi
width: 100vi;
w-vmax
width: 100vmax;
w-vmin
width: 100vmin;
w-vw
width: 100vw;
w-xl
width: 80rem;
w-xs
width: 32rem;
w-xxl
width: 96rem;

Responsiveness

Use breakpoint prefixes to target different screen sizes. Styles apply from the breakpoint & up.

Target viewport sizes with breakpoint prefixes.

@sm:w-(value)
Small≥640px
@md:w-(value)
Medium≥768px
@lg:w-(value)
Large≥1024px
@xxl:w-(value)
Extra Large≥1536px

Hover State

Apply styles conditionally on hover using the h: prefix.

Add the h: prefix to apply styles only when the user hovers over the element.

Syntax:h:w-(value)

Negative Values

Use negative variants to apply negative width values.

Use the -- syntax to apply negative numeric values.

Syntax:w--(value)