How to remove backquote around inline code? about tailwindcss-typography HOT 15 CLOSED

I know, I'm a little bit late to the party. But in case someone is interested in this. You can suppress the backticks with prose-code:before:hidden prose-code:after:hidden

from tailwindcss-typography.

This did not work for me (TW2.0) - when I was adding this to my tailwind config, it completely broke all styles.
I had to add a small change, and it worked

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      typography: {
        DEFAULT: {
          css: {
            'code::before': {
              content: '""'
            },
            'code::after': {
              content: '""'
            }
          }
        }
      },
    },
  },
  plugins: [require("@tailwindcss/typography")],
};

from tailwindcss-typography.

Apologies, I made a mistake in the tailwind.config.js. This is working for me now:

// tailwind.config.js
module.exports = {
  theme: {
    typography: {
      default: {
        css: {
          'code::before': {
            content: '""',
          },
          'code::after': {
            content: '""',
          },
        },
      },
    },
  },
  plugins: [require("@tailwindcss/typography")],
};

from tailwindcss-typography.

Actually I know exactly what is happening now, sorry.

Your changes are being merged with our existing code key, which comes before our code::before and code::after keys.

Here's our code:

code: {
  color: defaultTheme.colors.gray[900],
  fontWeight: '600',
},
'code::before': {
  content: '"`"',
},
'code::after': {
  content: '"`"',
},

When you're code is merged in, it creates this object:

code: {
  color: defaultTheme.colors.gray[900],
  fontWeight: '600',
  '&::before': {
    content: '""',
  },
  '&::after': {
    content: '""',
  },
},
'code::before': {
  content: '"`"',
},
'code::after': {
  content: '"`"',
},

So when it's all flattened out, our existing code::before and code::after selectors win. This is sort of a tough one to figure out how to "fix" because the current behavior is actually really useful for lots of situations, so we might just want to figure out a way to let the user control this more finely.

Going to close this for now since there's a solution (use our keys) and I can't say for sure we are going to take action on it.

from tailwindcss-typography.

@adamwathan some findings... Writing in this way will correctly overwrite the original style. Seems like using &::before, &::after will cause the styles to be applied before the original styles.

// tailwind.config.js
module.exports = {
  theme: {
    typography: {
      default: {
        css: {
          'code::before': {
            content: '""',
          },
          'code::after': {
            content: '""',
          }
          // ...
        },
      },
    },
  },
  plugins: [
    require('@tailwindcss/typography'),
    // ...
  ],
}

from tailwindcss-typography.

@Waterdrips ☝️ this should do the trick?

from tailwindcss-typography.

For v3, this works for me.

#135 (comment)

from tailwindcss-typography.

Can you create a GitHub repo that reproduces this? I just tried it on our blog and was able to override it no problem with your exact code.

from tailwindcss-typography.

Hi @dpyzo0o, if you add !important it should work. So like this:

typography: {
  default: {
    css: {
      code: {
        '&::before': {
          content: '"" !important',
        },
        '&::after': {
          content: '"" !important',
        },
      }
      // ...
    },
  },
},

I was able to reproduce your issue though, I think the problem is that the new class gets added before the typography plugin class and thus overwriting it.

I imagine this is something that could be fixed?

from tailwindcss-typography.

@vincentdoerig Yes, adding !important can solve the issue but I'm trying to avoid using !important if possible. Indeed I'm able to remove the backquotes by setting display: none

// tailwind.config.js
module.exports = {
  theme: {
    typography: {
      default: {
        css: {
          code: {
            '&::before': {
              display: 'none',
            },
            '&::after': {
              display: 'none',
            },
          }
          // ...
        },
      },
    },
  },
  plugins: [
    require('@tailwindcss/typography'),
    // ...
  ],
}

@adamwathan I'm sure this issue is reproducible, here is a minimal repo that reproduces the issue, https://github.com/dpyzo0o/tailwindcss-bug-reproduce

from tailwindcss-typography.

Ah yeah you know what I think I wrote it that way when I was testing things out, so I was wrong when I said I used your code exactly 🤦

It looks like this is due to a particular detail of how deep merging works in lodash, which causes object properties to be merged in a different order than I'd expect (overrides are added as earlier keys in the object being merged to, not later).

For now I would recommend mimicking the exact selector we use in the styles.js reference whenever you need to make an override, and we will see about making the merging behavior more intuitive.

EDIT: Actually doesn't seem like a lodash issue, not sure where this order issue pops up, might be in postcss-js. Will explore.

from tailwindcss-typography.

Hello, we have the same problem in that all our inline code is showing backticks, which we don't want. You mentioned that you have a solution: use our keys. Please can you explain this? I've gone through all the above and we still see backticks everywhere.

from tailwindcss-typography.

I know, I'm a little bit late to the party. But in case someone is interested in this. You can suppress the backticks with prose-code:before:hidden prose-code:after:hidden

But not too late! Thanks!

from tailwindcss-typography.

I know, I'm a little bit late to the party. But in case someone is interested in this. You can suppress the backticks with prose-code:before:hidden prose-code:after:hidden

This did the trick! Thank you!

from tailwindcss-typography.

prose-code:before:hidden prose-code:after:hidden

This worked! Thank you so much!!!!

from tailwindcss-typography.