Overriding and removing defaults

[spl]

(First reported at tailwindlabs/tailwindcss.com#492.)

I'm not sure how to override the default values and remove (a.k.a. “undefine” or “unset”) them. This is probably just a matter of clarifying the documentation.

I started with the following tailwind.config.js:

module.exports = {
  theme: {
    typography: {
      default: {
        css: {
          a: {
            background: /* ... */,
            textShadow: /* ... */,
          },
        },
      },
    },
  },
  plugins: [
    require('@tailwindcss/typography'),
  ],
}

I thought the a object would completely replace the .prose a style. But I discovered that .prose a still had text-decoration: underline, which I did not want. I tried adding textDecoration: undefined to the a in the tailwind.config.js above, but that didn't change anything. Then, I added textDecoration: null, and that seems to have removed the text-decoration. (textDecoration: false also seems to work.)

This leads to some questions:

1. How are the default values are combined with the default overrides in the tailwind.config.js?
2. What is the recommended way to undefine a default value?

Maybe you just want to expand on this text in the README.md with a bit more detail and an example:

It's important to note that all customizations are merged with the defaults. If you'd like to completely override a provided size modifier, you can do so by disabling that modifier so the default styles are not included.

Thanks!

[csenio]

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

[mattradford]

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.

[StevenGFX]

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'),
  ],
}

[mattradford]

Hey thanks @StevenGFX, very helpful 👍

[jacobdalamb]

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

[axe312ger]

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 🙃

[jacobdalamb]

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

[RobinMalfait]

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!

[alex-jitbit]

@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.