Override 65ch max-width in Tailwind CSS Typography

Question

I am using a Jekyll template with Tailwind and Typography, and I am interested in overriding the default max-width 65ch limit on each line.

The default setting was max-w-prose, and I have tried setting max-w-none to the parent element, along with prose, but it doesn't seem to work (although it messes with the alignment). I have also tried setting the max-w-none with prose in every element (wary of unwanted overrides to 65ch) but this also isn't cutting it.

I am thinking this could be done via the tailwind.config.js file, like:

  theme: {
    extend: {
      typography: {
        DEFAULT: {
          css: {
            'prose': {
              'max-width': '100ch'
            },
            'max-w-prose': {
              'max-width': '100ch'
            },
        ...

but I can't figure it out. Any tips are super welcome!

Answer 1

This is default .prose CSS properties so typography config should be like this

module.exports = {
  theme: {
    extend: {
      typography: {
        DEFAULT: {
          css: {
            maxWidth: '100ch', // add required value here
          }
        }
      }
    },
  },
  plugins: [
    require('@tailwindcss/typography'),
  ],
}

DEMO

Answer 2

An easier solution is to add another class with an importance flag using "!".

Take a look at below:

<section className="prose prose-sm !max-w-none">
    <PrismicRichText field={caption} />
</section>