How to customize tailwind typography blockquotes

Question

Tailwind typography, In order to add opening and closing quotes, add an after and before pseudo elements to blockquotes:

<blockquote>
    :after
    <p>Lorem ipsum.</p>
    :before
</blockquote>

I want to customize the style removing just the closing quotes to match this pattern:

Is it possible customize it from tailwind.config.js or should I override styles with CSS and !important?

Answer 1

As described in this issue: https://github.com/tailwindlabs/tailwindcss-typography/issues/66#issuecomment-756834635

You can add following configuration to your tailwind.config.js:

module.exports = {
  theme: {
    // ...
    extend: {
      typography: {
        quoteless: {
          css: {
            'blockquote p:first-of-type::before': { content: 'none' },
            'blockquote p:first-of-type::after': { content: 'none' },
          },
        },
      },
    },
  },
  //...
}

and add the class prose-quoteless to your prose element afterwards to remove all quotes.