如何移除Tailwind CSS排版插件prose中code伪元素的反引号？

我想自定义Tailwind CSS排版插件里默认prose类的行为，具体是移除code::before和code::after的反引号。我尝试了下面的配置：

/** @type {import('tailwindcss').Config} */

import defaultTheme from 'tailwindcss/defaultTheme'

module.exports = {
  content: [],
  theme: {
    extend: {
      typography: {
        DEFAULT: {
          css: {
            code: {
              'background-color': '#e5e7eb',
              // before and after are still showing backticks, but should be empty
              '&::before': {
                content: '""',
              },
              '&::after': {
                content: '""',
              },
              'border-radius': '0.25rem',
            }
          }
        }
      }
    }
  },
  plugins: [
    require('@tailwindcss/typography'),
  ],
}

但在Firefox开发者工具里观察到code::before和code::after仍然显示反引号，请问该如何解决？

问题出在配置的content值写法和样式生效逻辑上，调整以下两点即可解决：

1. 修正伪元素的content值
   原配置中""""的转义写法容易出现编译异常，直接改为'none'或'""'就能覆盖默认的反引号内容。其中'none'语义更明确，会直接移除伪元素的内容：

2. 确保项目文件路径配置正确
   原配置里content: []是空数组，Tailwind无法扫描到使用prose类的文件，可能导致自定义样式不生成。需要填入你项目实际的文件路径，比如['./src/**/*.{html,js,ts,jsx,tsx}']。

调整后的完整配置：

/** @type {import('tailwindcss').Config} */
import defaultTheme from 'tailwindcss/defaultTheme'

module.exports = {
  // 替换为你项目实际的文件路径
  content: ['./src/**/*.{html,js,ts,jsx,tsx}'],
  theme: {
    extend: {
      typography: {
        DEFAULT: {
          css: {
            code: {
              backgroundColor: '#e5e7eb',
              borderRadius: '0.25rem',
              '&::before': {
                content: 'none',
              },
              '&::after': {
                content: 'none',
              },
            },
          },
        },
      },
    },
  },
  plugins: [require('@tailwindcss/typography')],
}

如果仍存在样式优先级问题，可以临时添加!important强制覆盖（不推荐长期使用）：

'&::before': {
  content: 'none !important',
},
'&::after': {
  content: 'none !important',
},

内容的提问来源于stack exchange，提问作者Kacper Wyczawski