Max Width

Limit the maximum width of an element.

Widely available

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

Chrome
Edge
Firefox
Safari

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

Responsiveness

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

Target viewport sizes with breakpoint prefixes.

@sm:max-w-(value)
Small≥640px
@md:max-w-(value)
Medium≥768px
@lg:max-w-(value)
Large≥1024px
@xxl:max-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:max-w-(value)