max-width
Các utility để thiết lập chiều rộng tối đa của một phần tử.
| Class | Styles |
|---|---|
max-w-<number> | max-width: calc(var(--spacing) * <number>); |
max-w-<fraction> | max-width: calc(<fraction> * 100%); |
max-w-3xs | max-width: var(--container-3xs); /* 16rem (256px) */ |
max-w-2xs | max-width: var(--container-2xs); /* 18rem (288px) */ |
max-w-xs | max-width: var(--container-xs); /* 20rem (320px) */ |
max-w-sm | max-width: var(--container-sm); /* 24rem (384px) */ |
max-w-md | max-width: var(--container-md); /* 28rem (448px) */ |
max-w-lg | max-width: var(--container-lg); /* 32rem (512px) */ |
max-w-xl | max-width: var(--container-xl); /* 36rem (576px) */ |
max-w-2xl | max-width: var(--container-2xl); /* 42rem (672px) */ |
max-w-3xl | max-width: var(--container-3xl); /* 48rem (768px) */ |
max-w-4xl | max-width: var(--container-4xl); /* 56rem (896px) */ |
max-w-5xl | max-width: var(--container-5xl); /* 64rem (1024px) */ |
max-w-6xl | max-width: var(--container-6xl); /* 72rem (1152px) */ |
max-w-7xl | max-width: var(--container-7xl); /* 80rem (1280px) */ |
max-w-none | max-width: none; |
max-w-px | max-width: 1px; |
max-w-full | max-width: 100%; |
max-w-dvw | max-width: 100dvw; |
max-w-dvh | max-width: 100dvh; |
max-w-lvw | max-width: 100lvw; |
max-w-lvh | max-width: 100lvh; |
max-w-svw | max-width: 100svw; |
max-w-svh | max-width: 100svh; |
max-w-screen | max-width: 100vw; |
max-w-min | max-width: min-content; |
max-w-max | max-width: max-content; |
max-w-fit | max-width: fit-content; |
container | width: 100%;
@media (width >= 40rem) { max-width: 40rem; }
@media (width >= 48rem) { max-width: 48rem; }
@media (width >= 64rem) { max-width: 64rem; }
@media (width >= 80rem) { max-width: 80rem; }
@media (width >= 96rem) { max-width: 96rem; } |
max-w-(<custom-property>) | max-width: var(<custom-property>); |
max-w-[<value>] | max-width: <value>; |
Ví dụ
Ví dụ cơ bản
Sử dụng các utility max-w-<number> như max-w-24 và max-w-64 để thiết lập chiều rộng tối đa cố định cho một phần tử dựa trên thang khoảng cách:
Resize the example to see the expected behavior
<div class="w-full max-w-96 ...">max-w-96</div><div class="w-full max-w-80 ...">max-w-80</div><div class="w-full max-w-64 ...">max-w-64</div><div class="w-full max-w-48 ...">max-w-48</div><div class="w-full max-w-40 ...">max-w-40</div><div class="w-full max-w-32 ...">max-w-32</div><div class="w-full max-w-24 ...">max-w-24</div>Sử dụng phần trăm
Sử dụng max-w-full hoặc các utility max-w-<fraction> như max-w-1/2 và max-w-2/5 để thiết lập chiều rộng tối đa dựa trên phần trăm cho một phần tử:
Resize the example to see the expected behavior
<div class="w-full max-w-9/10 ...">max-w-9/10</div><div class="w-full max-w-3/4 ...">max-w-3/4</div><div class="w-full max-w-1/2 ...">max-w-1/2</div><div class="w-full max-w-1/3 ...">max-w-1/3</div>Sử dụng thang container
Sử dụng các utility như max-w-sm và max-w-xl để thiết lập chiều rộng tối đa cố định cho một phần tử dựa trên thang container:
Resize the example to see the expected behavior
<div class="max-w-md ..."> <!-- ... --></div>Sử dụng breakpoints container
Sử dụng utility container để thiết lập chiều rộng tối đa của một phần tử khớp với min-width của breakpoint hiện tại. Điều này hữu ích nếu bạn muốn thiết kế cho một tập hợp kích thước màn hình cố định thay vì cố gắng điều chỉnh viewport hoàn toàn linh hoạt:
<div class="container"> <!-- ... --></div>Lưu ý rằng không giống như container bạn có thể đã sử dụng trong các framework khác, container của Tailwind không tự động căn giữa và không có padding ngang tích hợp sẵn. Sử dụng mx-auto và các utility px-<number> để thêm những thứ này:
<div class="container mx-auto px-4"> <!-- ... --></div>Sử dụng giá trị tùy chỉnh
Use the max-w-[<value>] syntax to set the maximum width based on a completely custom value:
<div class="max-w-[220px] ..."> <!-- ... --></div>For CSS variables, you can also use the max-w-(<custom-property>) syntax:
<div class="max-w-(--my-max-width) ..."> <!-- ... --></div>This is just a shorthand for max-w-[var(<custom-property>)] that adds the var() function for you automatically.
Thiết kế phản hồi
Prefix a max-width utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:
<div class="max-w-sm md:max-w-lg ..."> <!-- ... --></div>Learn more about using variants in the variants documentation.
Tùy chỉnh theme của bạn
The max-w-<number> utilities are driven by the --spacing theme variable, which can be customized in your own theme:
@theme { --spacing: 1px; }Learn more about customizing the spacing scale in the theme variable documentation.