We can use w-max
to let the content decide the largest width of the box without wrapping.
Version
TailwindCSS 3.0
w-max
The box’s width is determined by the whole paragraph without wrapping.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
<title>TailwindCSS</title>
</head>
<body>
<div class="w-max">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum dicta dolorem eos facere nihil odio pariatur quo sequi, tenetur voluptates? Delectus fugit nemo unde voluptas. Culpa nihil quaerat quas repudiandae.</div>
</body>
</html>
Line 10
<div class="w-max">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum dicta dolorem eos facere nihil odio pariatur quo sequi, tenetur voluptates? Delectus fugit nemo unde voluptas. Culpa nihil quaerat quas repudiandae.</div>
</body>
w-max
: the ideal size a box can take without wrapping its content. The final width is decided by the size a box needs to contain all of its content without being wrapped or it overflows the box
whitespace-nowrap
We can also implement w-max
by whitespace-nowrap
.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
<title>TailwindCSS</title>
</head>
<body>
<div class="whitespace-nowrap">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum dicta dolorem eos facere nihil odio pariatur quo sequi, tenetur voluptates? Delectus fugit nemo unde voluptas. Culpa nihil quaerat quas repudiandae.</div>
</body>
</html>
Line 10
<div class="whitespace-nowrap">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum dicta dolorem eos facere nihil odio pariatur quo sequi, tenetur voluptates? Delectus fugit nemo unde voluptas. Culpa nihil quaerat quas repudiandae.</div>
whitespace-nowrap
: is equivalent tow-max
figure
We often use w-min
for <figure>
with <img>
and <figcaption>
. When w-max
is used with <figure>
, which is not wrapping.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
<title>TailwindCSS</title>
</head>
<body>
<figure class="w-max">
<img src="https://picsum.photos/300/200/?random=10">
<figcaption>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A amet assumenda debitis, doloremque, earum id inventore laborum minus neque quam quasi quia quos reiciendis sequi suscipit tempora totam, ut veniam.</figcaption>
</figure>
</body>
</html>
Line 10
<figure class="w-max">
<img src="https://picsum.photos/300/200/?random=10">
<figcaption>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A amet assumenda debitis, doloremque, earum id inventore laborum minus neque quam quasi quia quos reiciendis sequi suscipit tempora totam, ut veniam.</figcaption>
</figure>
w-max
:<img>
‘s ideal width is300px
.<figcaption>
‘s ideal width without wrapping is larger than<img>
. So<figcaption>
decides the final width ofw-max
Conclusion
w-min
is often used with<figure>
, notw-max
. We only usew-max
with<figure>
for demo
Reference
Ibadehin Mojeed, Understanding min-content, max-content, and fit-content in CSS