HelloGitHub-Team/geese

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

521xueweihan opened this issue · 1 comments

我用 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 模式显示正常

image

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

image

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

我现在是毫无头绪~

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

解决办法:

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

相关资料: