Max Widths
- This shows the size of various width settings in Tailwind
- Lines are left justified with a 6 pixel marging to make it easier to see the widths
- The basic widths are defined via `rem` properties. I've added the default pixel sizes
- The `max-w-prose` width is defined with `max-width: 65ch`. It changes based on the font size
- I was thrown by the fact that `max-w-screen-md` is the same size as `max-w-3xl` by default. I would have thought `max-w-md` would have been closer to the same size, but that's not how this is set up
Basic Widths
max-w-xs - (20rem - 320px)
max-w-sm - (24rem - 384px)
max-w-md - (28rem - 448px)
max-w-lg - (32rem - 512px)
max-w-xl - (36rem - 576px)
max-w-2xl - (42rem - 672px)
max-w-3xl - (48rem - 768px)
max-w-4xl - (56rem - 896px)
max-w-5xl - (64rem - 1024px)
max-w-6xl - (72rem - 1152px)
max-w-7xl - (80rem - 1280px)
Screen Widths
max-w-screen-sm (640px)
max-w-screen-md (768px)
max-w-screen-lg (1024px)
max-w-screen-xl (1280px)
max-w-screen-2xl (1536px)
Prose Widths
text-xs - (491px)
text-sm - (573px)
text-base - (655px)
text-lg - (736px)
text-xl - (812px)
text-2xl - (953px)
text-3xl - (1183px)
text-4xl - (1471px)
text-5xl - (1892px)
text-6xl - (2365px)
text-7xl - (2838px)
text-8xl - (3784px)
text-9xl - (bigger than my monitor)