Mark van Seventer

Getting Practical with the Tailwind Typography Plugin

It feels like just about every new website these days uses Tailwind CSS, and this one’s no exception. I wanted a quick way to make my articles more readable (larger text, better spacing, and so on), and it turns out Tailwind has a built-in Typography plugin. Perfect. However, I did run into one issue worth discussing.

Using the plugin is simple: apply a prose class to your article element, and you’re good to go. Nested elements automatically inherit sensible typography styles (unless you opt out with not-prose). Easy enough.

The Problem: max-width

Research suggests the ideal line length for comfortable reading is around 50–75 characters. Long enough to scan easily, short enough to reduce eye strain. Tailwind’s team knows this and enforces a max-width of 65 characters in the plugin.

That’s great for text-heavy content. But for image-heavy layouts or, in my case, code snippets, this becomes limiting. Since the article element itself is constrained, all elements inherit that restriction. Even if you opt out, you still can’t override the parent’s max-width. The result: cramped code blocks with wasted horizontal space.

The Solution: Using CSS Grid

To let certain parts of my article extend beyond the text length, we can use a CSS Grid layout with two columns:

  1. The first column holds the text, constrained to our readable width,
  2. The second column allows elements (like code or images) to span the full width.

In Practice

Here’s the approach in action (this page uses this approach, so you can also open your browser DevTools):

<article class="prose max-w-none grid grid-cols-[minmax(auto,65ch)_1fr] *:col-start-1">
  <h1>...</h1>
  <p>...</p>
  <code class="not-prose col-span-full">...</p>
  <figure class="col-span-full">...</figure>
</article>

For those less familiar with Tailwind, these classes create a two-column grid where each child sits in the first column unless otherwise specified. The second column takes up the remaining space (1fr).

The code and figure blocks (or any full-width element) span both columns, effectively breaking out of the 65-character limit. This gives you your desired layout while keeping text nicely constrained.

Conclusion

By using CSS Grid, we can combine the readability benefits of Tailwind’s Typography plugin with the flexibility to let certain elements extend across the full screen width. It’s a small tweak, but it makes a big difference in how your articles are presented.