Override Tailwind CSS Typography Max-Width

Override Tailwind CSS Typography Max-Width

By default, Tailwind CSS Typography sets a maximum width of 65ch for its prose class. If you need to increase or override this width, such as setting it to 100ch, here’s how you can customize your project.

Steps to Override Typography Max-Width

1. Update tailwind.config.cjs

To globally override the max-width in the Typography plugin, extend the typography theme in your Tailwind configuration file:

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      typography: {
        DEFAULT: {
          css: {
            maxWidth: '100ch', // Set desired max-width here
          },
        },
      },
    },
  },
  plugins: [require('@tailwindcss/typography')],
}

This adjustment applies to all prose classes globally.

2. Add !max-w-none for Specific Overrides

If you need to override the max-width for specific components or sections without modifying the global configuration, use the !important flag in your classes:

<section class="prose prose-sm !max-w-none">
  <p>Override the 65ch max-width for this section.</p>
</section>

The !max-w-none class removes the default max-width entirely.

3. Combine Prose with Custom Utility Classes

Another approach is to use utility classes alongside prose to control widths for specific use cases:

<div class="prose max-w-[75ch]">
  <p>This prose element has a max-width of 75 characters.</p>
</div>

This allows fine-grained control while retaining other Typography styles.

Common Use Cases

• Blog Posts: Increase readability by allowing more characters per line.
• Documentation: Adjust the width for detailed text-heavy content.
• Landing Pages: Maintain consistent layout across sections with variable widths.

FAQs

Q: Why is the default max-width 65ch?

The 65-character limit is a design standard aimed at optimizing readability. Studies suggest that this width improves legibility and reader focus.

Q: Can I apply different max-widths for mobile and desktop?

Yes, you can use responsive variants in Tailwind:

<div class="prose max-w-[50ch] md:max-w-[100ch]">
  <p>Responsive max-width example for prose.</p>
</div>

Q: Do I need to install additional plugins?

No, the @tailwindcss/typography plugin already supports customization through the tailwind.config.cjs file.