Add a 65ch "readable" max/min width

[Soviut]

Tailwind Typography applies a 65ch max-width to its text blocks. 65 character width is generally agreed to be the maximum readable width for text; Any more and the line length gets too long and it becomes easier to loser your place as your eye moves between lines.

I think it would be a good idea to add readable width, max-width and min-width to the default widths. Not only will this make it easier to match widths in Tailwind Typography, but it will provide a clear legibility standard that Tailwinds users can follow. It's practical and educational.

Of course, it's easy enough to add these manually, as follow:

module.exports = {
  theme: {
    extend: {
      maxWidth: {
        'readable': '65ch',
      },
    },
  },

Which is used as

<div class="w-full max-w-readable">this is some very long text...</div>

However, having it as a default would mean it's well documented and more likely to be used.

More details about the ch unit can be found here.

Represents the width, or more precisely the advance measure, of the glyph "0" (zero, the Unicode character U+0030) in the element's font.
In the cases where it is impossible or impractical to determine the measure of the “0” glyph, it must be assumed to be 0.5em wide by 1em tall.

[Soviut]

I created a pull request that adds this feature #2574

[simonswiss]

Good stuff - this has been merged in the Tailwind 2.0.0 alpha.2 release 👍

[davidmyersdev]

For others that stumble upon this old thread, the PR renamed readable to prose, so an example usage would be max-w-prose.

[Soviut]

@voraciousdev Yes, thanks, here is the link to the docs https://tailwindcss.com/docs/max-width#reading-width

[Soviut]

For posterity, here is a link to the docs for max-w-prose

https://tailwindcss.com/docs/max-width#reading-width