tailwind.config.js snippet to do fancy block quotes. see https://amattn.com/p/brief_history_of_and_advanced_tricks_with_tailwind_css.html

tailwind.config.js

// https://tailwindcss.com/docs/customizing-colors#color-palette-reference
const colors = require('tailwindcss/colors')

const round = (num) =>
  num
    .toFixed(7)
    .replace(/(\.[0-9]+?)0+$/, '$1')
    .replace(/\.0$/, '')
const rem = (px) => `${round(px / 16)}rem`
const em = (px, base) => `${round(px / base)}em`

module.exports = {
  // snip...
  theme: {
    // snip...
    extend: {
      // snip...
      typography: (theme) => ({
        DEFAULT: {
          css: {
            // snip...
            blockquote: {
            	fontSize: '150%',
              fontWeight: '500',
              fontStyle: 'italic',
            	fontVariant: 'small-caps',
              color: theme('colors.gray.100'),
              borderLeftWidth: '0.0rem',
              // borderLeftColor: theme('colors.gray.200'),
              marginTop: em(0, 30),
              marginLeft: em(30, 30),
            },
            'blockquote:before': {
              fontSize: '4.5em',
              marginTop: em(-12, 30),
              marginLeft: em(-18, 30),
              color: '#919da7',
              position: 'absolute',
	            fontFamily: 'Georgia, "Times New Roman", Times, serif',
              content: '"\\201C"',
              fontWeight: 'bold',
              fontStyle: 'normal',
            },
            'blockquote p:first-of-type::before': {
              content: '""',
            },
            'blockquote p:first-of-type::after': {
              content: '""',
            },
          },
        },
        sm: {
          css: {
            blockquote: {
              marginTop: em(0, 30),
              marginLeft: em(24, 30),
            },
            'blockquote:before': {
              fontSize: '4.5em',
              marginTop: em(-12, 30),
              marginLeft: em(-18, 30),
            },
          },
        },
        lg: {
          css: {
            blockquote: {
              marginTop: em(0, 30),
              marginLeft: em(24, 30),
            },
            'blockquote:before': {
              fontSize: '4.5em',
              marginTop: em(-12, 30),
              marginLeft: em(-18, 30),
            },
          },
        },
        xl: {
          css: {
            blockquote: {
              marginTop: em(0, 30),
              marginLeft: em(28, 30),
            },
            'blockquote:before': {
              fontSize: '4.5em',
              marginTop: em(-12, 30),
              marginLeft: em(-18, 30),
            },
          },
        },
        '2xl': {
          css: {
            blockquote: {
              marginTop: em(0, 0),
              marginLeft: em(24, 30),
            },
            'blockquote:before': {
              fontSize: '4.5em',
              marginTop: em(-12, 30),
              marginLeft: em(-18, 30),
            },
          },
        },
      }),
    },
  },
  variants: {},
  plugins: [
    require('@tailwindcss/typography'),
  ],
}