移动端访问文章，无 prose 样式

[削微寒]

我用 nextjs 的 typography-plugin 插件，为渲染好的 md 内容增加样式，代码片段：

<MDRender className='prose mobile:prose-sm prose-blue max-w-none dark:invert'>
    {article.content}
</MDRender>

自行封装的 MDRender 组件源码

PC 上内容样式按照预期展示，但是移动端无 prose 插件的样式。PC 端浏览器开发者模式，切换 mobile 模式显示正常：

但是手机端真机访问无 prose 样式，异常：

问题地址：https://hellogithub.com/article/9d73ebcfe98f4d478f55057ec4e942aa （手机访问可以复现）

我现在是毫无头绪～

[削微寒]

问题原因：where 语法在各种浏览器的兼容问题

解决办法：

module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require('@tailwindcss/typography')({
      target: 'legacy', // disables :where() selectors
    }),
  ]
  ...
}

相关资料：

• where 兼容性查询
• Not working on Safari 13.1.3 and Edge 87