CODEWITHSUNDEEP
csstailwind-cssextendtypographyprose
John Karkas
John Karkas

Reputation: 369

Override 65ch max-width in Tailwind CSS Typography

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!

Upvotes: 13

Views: 17313

Answers (3)

Imran Sefat
Imran Sefat

Reputation: 773

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>

Upvotes: 7

Moncef Zmander
Moncef Zmander

Reputation: 29

It's simple, Tailwind is taking the prose max-width as the default width, so all you have to do is add a ! behind the max-w-none to make it important. like this: prose !max-w-none

Upvotes: 2

Ihar Aliakseyenka
Ihar Aliakseyenka

Reputation: 14333

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

Upvotes: 25

Related Questions