Overriding and removing defaults about tailwindcss-typography HOT 9 CLOSED

Hey! Thank you for your issue!
Much appreciated! 🙏

If you want to override the full typography plugin than you can put it directly in the theme.typography section:

https://play.tailwindcss.com/cIbKOcLoO9?file=config

module.exports = {
  theme: {
    typography: {
      DEFAULT: {
        css: {
          pre: {
            backgroundColor: 'hotpink',
          },
        },
      },
    },
  },
  variants: {},
  plugins: [require('@tailwindcss/typography')],
}

Notice that nothing "exists" except for the new styles on the pre tag.

If you want to keep most of it, but "remove" some of the parts, then you can put the code inside theme.extend.typography and mark some sections with null:

https://play.tailwindcss.com/2ZyvC8cj9g?file=config

module.exports = {
  theme: {
    extend: {
      typography: {
        DEFAULT: {
          css: {
            pre: null
          },
        },
      },
    },
  },
  variants: {},
  plugins: [require('@tailwindcss/typography')],
}

Notice that everything of the typography styles still exist, except for the pre related styles.

Hope this helps!

from tailwindcss-typography.

Same issue, for my use case I need to keep the reset on pre blocks as I'm using prismjs for highlights

from tailwindcss-typography.

why is this still an issue... it's normal css just put textDecoration: none;

It's not that easy. It is polluting your CSS for no reason with an extra statement that could be avoided.

We would prefer clean code, that contains as little overridden statements as possible 🙃

One: it's pretty easy. and Two: it's in your config so I don't know how it would be polluting your CSS

from tailwindcss-typography.

Same sort of issue for me: I'm using a descendant selector to target children of .prose, and need to allow some wide and full width components. This is where setting width to 65ch doesn't work, as larger text such as headings have a wider width. Using .max-w-none isn't helpful as then I need to override both .prose and .max-w-none.

So really I'd just like to set the max-width for prose myself. Thanks.

from tailwindcss-typography.

@RobinMalfait

If you want to keep most of it, but "remove" some of the parts, then you can put the code inside theme.extend.typography and mark some sections with null:

It would be awesome if you put this into the docs. It took me a while to find this issue.

from tailwindcss-typography.

Same sort of issue for me: I'm using a descendant selector to target children of .prose, and need to allow some wide and full width components. This is where setting width to 65ch doesn't work, as larger text such as headings have a wider width. Using .max-w-none isn't helpful as then I need to override both .prose and .max-w-none.

So really I'd just like to set the max-width for prose myself. Thanks.

@mattradford I set a max-width on the .prose class with the following:

module.exports = {
  typography: {
    default: {
      css: {
        maxWidth: '65ch',
      },
    },
  },
  plugins: [
    require('@tailwindcss/typography'),
  ],
}

from tailwindcss-typography.

Hey thanks @StevenGFX, very helpful 👍

from tailwindcss-typography.

why is this still an issue... it's normal css just put textDecoration: none;

from tailwindcss-typography.

why is this still an issue... it's normal css just put textDecoration: none;

Its not that easy. It is polluting your CSS for no reason with an extra statement that could be avoided.

We would prefer clean code, that contains as little overridden statements as possible 🙃

from tailwindcss-typography.