[Feature proposal] Prose core plugins about tailwindcss-typography HOT 6 CLOSED

To disable the code colors that are fighting with Prism you should just need to do this:

As I said earlier: if I overwrite pre code styles so code boxes have one style, while small snippets using just code have another, the styles from the later would be inherited.

This is the code I have for code:

code: {
  backgroundColor: defaultTheme.colors.gray[200],
  borderRadius: defaultTheme.borderRadius.default,
  paddingLeft: defaultTheme.spacing[1],
  paddingRight: defaultTheme.spacing[1],
  display: 'inline-block',
  lineHeight: defaultTheme.lineHeight['snug'],
},

Now code elements inside pre inherit these styles, that is, they get back backgroundColor and get the default color that I didn't overwrite.

Prism selectors also have less specificity because they are targeting elements like code[class*='language-'],pre[class*='language-'].

Core plugins

I will work to improve my proposal as I'm not familiar with the inner working of the corePlugins inside Tailwind CSS. But as a summary for now:

• With Tailwind you can use corePlugins to disable unwanted features, ex:

module.exports = {
  corePlugins: {
    float: false,
    objectFit: false,
    objectPosition: false,
  }
}

• My idea would be something like this, but living inside the typography plugin, as a property, like:

theme: {
  extend: {},
  typography: {
    corePlugins: {
      code: false,
      lists: false,
    },
    default: {

This way I could completely disable all styles related to code and lists and provide my own or something.

I'll refine this idea and call back.

from tailwindcss-typography.

I'm not sure I understand the proposal, can you provide an example of what you mean? Where do "prose core plugins" live, how are they configured, how does the user interact with the, what is a concrete example of a prose core plugin?

To disable the code colors that are fighting with Prism you should just need to do this:

pre: { color: null, backgroundColor, null },
'pre code': { color: null, backgroundColor: null },

from tailwindcss-typography.

This comment was quite helpful for me: tailwindlabs/tailwindcss#2021 (reply in thread)

from tailwindcss-typography.

This sounds ideal, really. I'm running into the same problem trying to implement Prism.

I'm working typography into two different projects and I've found I'm making a lot of overrides in my config file that could be avoided if it was structured more like Tailwind itself. Especially for this use case. I really just want to nuke all code/pre styling.

from tailwindcss-typography.

Hi everyone!

Does anyone found a solution to this issue?

from tailwindcss-typography.

Hey all, I am going to close this issue, as it hasn't really gone anywhere. Plus, since this has been posted we've made big changes to this plugin (see here), making it easier than ever to customize the typography styles 💪

That said, reviewing this issue myself, I'm not sure if Adam's point was fully understood. Adam is not suggesting that you overwrite the styles that are applied for the code and pre elements in this plugin — he's suggesting that you completely remove them from being generated in the first place:

To disable the code colors that are fighting with Prism you should just need to do this:

pre: { color: null, backgroundColor, null },
'pre code': { color: null, backgroundColor: null },

By setting all the values to null, they will be excluded entirely 👍

from tailwindcss-typography.