Redefine prose width without prose plugin?

[zipper]

I have recently removed @tailwindcss/typography from project, since we run into some issues with where it inserts styles (I need them in another layer than utilities for some reasons). To my surprise, there is still a class max-w-prose present, even without the typography plugin. However, the value is undocumented (in v3, this value was mentioned in the docs; I cannot find it in v4) and what's worse, I'm unable to change its default value of 65ch. How can this utility be redefined with my custom value? Is the 65ch hardcoded in Tailwind's core? And if so, would that be considered a bug?

[zipper]

I guess I have found it? Besides the --container-prose, there is also a --max-width-prose variable. The first one only appears in tests, while the second one is in the theme definition. Not sure why that is, but the answer would be to override the --max-width-prose, right?

[rozsazoltan]

Yeah. Here's how you can disable it with undocumented --max-width-* namespace:

@theme {
  --max-width-prose: initial;
}

• https://play.tailwindcss.com/PEw4apqlM2?file=css

Note

After v3, in v4 there are many undocumented namespaces, such as --max-width-*. I've tried to summarize them here:

• Which TailwindCSS v4 namespace matches a given TailwindCSS v3's theme keys?

Tip

The initial value always means disabling or resetting - it reverts the property if it exists by default. For example:

• Disable all colors: --color-*: initial;
• Disable a color group: --color-green-*: initial;
• Disable a specific color: --color-green-500: initial;

Or modify it with a different value instead of initial:

@theme inline {
  --max-width-prose: 1000px;
}

• https://play.tailwindcss.com/NokFDYjdxJ?file=css

Tip

In the case of @theme, it places the 1000px value into a global variable and then passes that global variable to the utility.

/* Generated CSS */
@layer theme {
  :root, :host {
    --max-width-prose: 1000px;
  }
}
@layer utilities {
  .max-w-prose {
    max-width: var(--max-width-prose);
  }
}

If you don't need that, using @theme inline will pass 1000px directly to the utility.

/* Generated CSS */
@layer utilities {
  .max-w-prose {
    max-width: 1000px;
  }
}

Read more: Should I use @theme or @theme inline?