Why does the class "prose" shrink elements' widths?

[ooker777]

This code works when there is no class prose on <main>:

<div class="flex flex-row gap-3 w-full">
  <div class="basis-1/2 bg-yellow-50 p-10">
    123
  </div>  
  <div class="basis-1/2 bg-yellow-50 p-10">
    abc
  </div>  
</div>

However, the class prose from the Typography plugin is added:

-     <main class="flex flex-row gap-3 w-full">
+     <main class="prose flex flex-row gap-3 w-full">

Then all element's widths shrink:

(Tailwind Play)

Why is that the case? How to prevent it?

[alex-krasikau]

Hey @ooker777!

By default, the prose plugin applies max-width: 65ch to a container. This is a good practice for improving the readability of text content.

To remove it, add max-w-none to the container.

- <main class="prose flex flex-row gap-3 w-full">
+ <main class="prose flex w-full flex-row gap-3 max-w-none">

You can also achieve the same results by updating the Typography Plugin configuration:

module.exports = {
  theme: {
    extend: {
      typography: {
        DEFAULT: {
          css: {
            maxWidth: 'none',
          },
        },
      },
    },
  },
  plugins: [require('@tailwindcss/typography')],
}

Here is the complete example: Play Tailwind - Typography Configuration.

[ooker777]

Thanks. Should this be mentioned in the docs?

[alex-krasikau]

This one is already in the docs - Overriding max-width 😉