You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
We added a new max-width by default called `max-w-prose`. If you are familiar with the [typography plugin](https://github.com/tailwindlabs/tailwindcss-typography) you might recognize this one. The idea behind this class is that it allows you to have an optimal reading width.
32
+
The `max-w-prose` utility gives an element a max-width optimized for readability and adapts based on the font size.
<pclass="font-bold">Why do you never see elephants hiding in trees?</p>
40
-
<p>Because they're so good at it. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.</p>
37
+
<p>Dolore iste eaque molestias. Eius iure ut eaque accusantium. Voluptas repellendus nobis. Saepe nam accusantium magni veniam qui enim mollitia excepturi sapiente.</p>
<p>Dolore iste eaque molestias. Eius iure ut eaque accusantium. Voluptas repellendus nobis. Saepe nam accusantium magni veniam qui enim mollitia excepturi sapiente.</p>
<p>Dolore iste eaque molestias. Eius iure ut eaque accusantium. Voluptas repellendus nobis. Saepe nam accusantium magni veniam qui enim mollitia excepturi sapiente.</p>
41
44
</div>
42
45
</template>
43
46
44
-
<divclass="**max-w-prose** ...">
45
-
<pclass="font-bold">Why do you never see elephants hiding in trees?</p>
46
-
<p>Because they're so good at it. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.</p>
47
+
<divclass="text-sm **max-w-prose** ...">
48
+
<p>Dolore iste eaque molestias. Eius iure ut eaque accusantium. Voluptas repellendus nobis. Saepe nam accusantium magni veniam qui enim mollitia excepturi sapiente.</p>
47
49
</div>
48
-
```
49
50
50
-
---
51
+
<divclass="text-base **max-w-prose** ...">
52
+
<p>Dolore iste eaque molestias. Eius iure ut eaque accusantium. Voluptas repellendus nobis. Saepe nam accusantium magni veniam qui enim mollitia excepturi sapiente.</p>
53
+
</div>
51
54
52
-
## Responsive
55
+
<divclass="text-xl **max-w-prose** ...">
56
+
<p>Dolore iste eaque molestias. Eius iure ut eaque accusantium. Voluptas repellendus nobis. Saepe nam accusantium magni veniam qui enim mollitia excepturi sapiente.</p>
57
+
</div>
58
+
```
53
59
54
-
To control the max-width of an element at a specific breakpoint, add a `{screen}:` prefix to any existing max-width utility.
60
+
## Constraining to your breakpoints
61
+
62
+
The `max-w-screen-{breakpoint}` classes can be used to give an element a max-width matching a specific breakpoint. These values are automatically derived from the [`theme.screens` section](/docs/theme#screens) of your `tailwind.config.js` file.
55
63
56
64
```html
57
-
<divclass="max-w-sm **md:max-w-lg** ...">
65
+
<divclass="max-w-screen-2xl">
58
66
<!-- ... -->
59
67
</div>
60
68
```
61
69
62
-
For more information about Tailwind's responsive design features, check out the [Responsive Design](/docs/responsive-design) documentation.
63
-
64
70
---
65
71
66
-
## Responsive breakpoint
72
+
## Responsive
67
73
68
-
The `max-w-screen-*` classes are derived from the [`theme.screens` section](/docs/theme#screens) of your `tailwind.config.js` file.
74
+
To control the max-width of an element at a specific breakpoint, add a `{screen}:` prefix to any existing max-width utility.
69
75
70
76
```html
71
-
<divclass="max-w-screen-2xl">
77
+
<divclass="max-w-sm **md:max-w-lg** ...">
72
78
<!-- ... -->
73
79
</div>
74
80
```
75
81
82
+
For more information about Tailwind's responsive design features, check out the [Responsive Design](/docs/responsive-design) documentation.
83
+
76
84
---
77
85
78
86
## Customizing
79
87
80
88
### Max-Width Scale
81
89
82
-
Customize Tailwind's default max-width scale for the `max-w-*` classes in the `theme.maxWidth` section of your `tailwind.config.js` file.
90
+
Customize Tailwind's default max-width scale for the `max-w-*` classes in the `theme.maxWidth` section of your `tailwind.config.js` file.
0 commit comments