Skip to content

Commit 91cefa4

Browse files
committed
Tweaks
1 parent f8aec40 commit 91cefa4

File tree

1 file changed

+32
-24
lines changed

1 file changed

+32
-24
lines changed

src/pages/docs/max-width.mdx

Lines changed: 32 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -15,71 +15,79 @@ export const classes = {
1515

1616
## Usage
1717

18-
Set the maximum width of an element using the `max-w-{size}` or `max-w-screen-{breakpoint}` utilities.
18+
Set the maximum width of an element using the `max-w-{size}` utilities.
1919

20-
```html emerald
20+
```html emerald resizable
2121
<template preview>
22-
<div class="max-w-md mx-auto rounded-md bg-emerald-500 text-white text-2xl font-extrabold flex items-center justify-center py-3">
23-
max-w-md
24-
</div>
22+
<div class="max-w-md mx-auto rounded-md h-16 bg-emerald-500 select-none"></div>
2523
</template>
2624

2725
<div class="**max-w-md** mx-auto ...">
28-
max-w-md
26+
<!-- ... -->
2927
</div>
3028
```
3129

32-
## Prose
30+
## Reading width
3331

34-
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.
3533

3634
```html purple
3735
<template preview>
3836
<div class="max-w-prose text-sm text-purple-700 p-6">
39-
<p class="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>
38+
</div>
39+
<div class="max-w-prose text-base text-purple-700 p-6">
40+
<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+
</div>
42+
<div class="max-w-prose text-xl text-purple-700 p-6">
43+
<p>Dolore iste eaque molestias. Eius iure ut eaque accusantium. Voluptas repellendus nobis. Saepe nam accusantium magni veniam qui enim mollitia excepturi sapiente.</p>
4144
</div>
4245
</template>
4346

44-
<div class="**max-w-prose** ...">
45-
<p class="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+
<div class="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>
4749
</div>
48-
```
4950

50-
---
51+
<div class="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>
5154

52-
## Responsive
55+
<div class="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+
```
5359

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.
5563

5664
```html
57-
<div class="max-w-sm **md:max-w-lg** ...">
65+
<div class="max-w-screen-2xl">
5866
<!-- ... -->
5967
</div>
6068
```
6169

62-
For more information about Tailwind's responsive design features, check out the [Responsive Design](/docs/responsive-design) documentation.
63-
6470
---
6571

66-
## Responsive breakpoint
72+
## Responsive
6773

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.
6975

7076
```html
71-
<div class="max-w-screen-2xl">
77+
<div class="max-w-sm **md:max-w-lg** ...">
7278
<!-- ... -->
7379
</div>
7480
```
7581

82+
For more information about Tailwind's responsive design features, check out the [Responsive Design](/docs/responsive-design) documentation.
83+
7684
---
7785

7886
## Customizing
7987

8088
### Max-Width Scale
8189

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.
8391

8492
```diff-js
8593
// tailwind.config.js

0 commit comments

Comments
 (0)