Not always helpful to include " quotation marks for block-quote..what if you want to include source name?

[jensamunch]

[jensamunch]

I fixed in this way - dirty hack

module.exports = {
  plugins: [
    require('@tailwindcss/ui'),
    require('@tailwindcss/typography'),
  ],
  important: true,
  future: {
  },
  experimental: {
    uniformColorPalette: true,
  },
  theme: {
    typography: {
      default: {
        css: {
          color: '#1d1d1f',
          'h1, h2, h3': {
            fontWeight: '800',
          },
          p: {
            '&::before': {
              content: 'none !important',
            },
            '&::after': {
              content: 'none !important',
            },
          },
        },
      },

[mathieutu]

you also can set false to disable it:

'blockquote p:first-of-type::before': false,
'blockquote p:last-of-type::after': false,

[jacobdalamb]

There's any easier way to solve this... use the span element

[RobinMalfait]

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

The typography has more opinions compared to our other plugins. In case you don't want those quotes, you can unset them inside your config.
Here is an example where I have a custom modifier that showcases the result: https://play.tailwindcss.com/X74ERwVrHb

[nkilm]

@RobinMalfait Thank you for providing the solution, it does remove the quotes. But it also removes some of the CSS properties i.e it removes the margins defined in prose class. How can I fix this?

[NatoBoram]

I'm trying to write this in Tailwind for the sake of it instead of making a new class and this is what I've come up with:

<div class="before:prose-p:content-none after:prose-p:content-none" />

I haven't been able to fit first-of-type and prose-blockquote, but maybe someone else will

[ghost]

@mathieutu where should i exactly put those rules? I couldn't figure it out.

[raymondluong]

@terlan4 put it in tailwind.config.js, like this:

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      typography: {
        DEFAULT: {
          css: {
            'blockquote p:first-of-type::before': false,
            'blockquote p:first-of-type::after': false,
          },
        },
      },
    },
  },
  plugins: [
    require('@tailwindcss/typography'),
    // ...
  ],
}

https://tailwindcss.com/docs/typography-plugin#customizing-the-css

[jondcoleman]

This seems to work also:

  theme: {
    extend: {
      typography: {
        DEFAULT: {
          css: {
            blockquote: {
              quotes: "none",
            },
          },
        },
      },
    },
  },

[domdomegg]

For tailwind v4, you can do this in your globals.css (or wherever you have your @import "tailwindcss"; directive):

@utility prose {
    blockquote {
        /* Disable adding quote marks to block-quotes: https://github.com/tailwindlabs/tailwindcss-typography/issues/66 */
        p {
            &:first-of-type::before,
            &:last-of-type::after {
                content: none;
            }
        }
    }
}