Remove prose from a child Tailwind Typography

Question

I want to remove prose from the <code> section which is dynamically generated so I don't have access to it.

So I need to find a way to remove prose from the parent in the classname.

I try different ways :

• not-prose

• prose-code:

• Customizing default css

But that still doesn't work

<Layout isChallenge={true} routerQueryId={routerQueryId as string}>
      <ProseContainer style="">
        {source ? <MDXRemote {...source} /> : <p>Fetching content from GitHub...</p>}
      </ProseContainer>
</Layout>

Here I want to edit <ProseContainer>style

I try this in tailwind.config.jsfile :

typography: {
  default: {
    css: {
      pre: false,
      code: false,
      'pre code': false,
      'code::before': false,
      'code::after': false
    }
  }
}

Does anyone know how to remove prose from any section dynamically generated?

EDIT :

This seem to remove everything instead of removing only the code section

 theme: {
    typography: {
      DEFAULT: {
        css: {
          pre: false,
          code: false,
          'pre code': false,
          'code::before': false,
          'code::after': false
        }
      }
    },
    extend: {
      fontFamily: {
        sans: ['Inter var', ...defaultTheme.fontFamily.sans]
      }
    }
  },

Answer 1

Can you try side by side this?

<Layout>
  <div>
        {source ? <MDXRemote {...source} /> : <p>Fetching content from GitHub...</p>}
  </div>
  <ProseContainer style="">
        {source ? <MDXRemote {...source} /> : <p>Fetching content from GitHub...</p>}
      </ProseContainer>
</Layout>

Answer 2

You're overwriting the typography settings instead of extending them. Do this instead:

theme: {
  extend: {
    fontFamily: {
      sans: ['Inter var', ...defaultTheme.fontFamily.sans]
    },
    typography: {
      DEFAULT: {
        css: {
          pre: false,
          code: false,
          'pre code': false,
          'code::before': false,
          'code::after': false
        }
      }
    }
  }
}