Does not work on wechat webview

[WilsonPhoo]

What version of @tailwindcss/typography are you using?

v0.5.10

What version of Node.js are you using?

v18.17.0

What browser are you using?

Wechat Webview

What operating system are you using?

Android

Reproduction repository

https://github.com/tailwindlabs/tailwindcss-typography

Describe your issue

Just view this on the WeChat WebView on Android. All the font size and margins are gone.

WeChat Version 8.0.37 on
Samsung S23 Ultra Android 14, 6.0 One UI version.

https://tailwindcss-typography.vercel.app/

[thecrypticace]

I can’t find too much about what might be the problem here but I suspect it’s related to our use of :where(…) in CSS selectors. This would mean that the web view being used by WeChat currently is over 3 years old.

I did some poking around and at least one person has said that WeChat has been bundled — at least previously — with a very old fork of webview on Android. Meaning that instead of using the one provided by the system which can be (and is) updated they use one that can't be updated. Any update to the web view must be done by WeChat itself.

So there's a high chance this is a WeChat issue. There is, however, a potential workaround. If you're running into this on a website you control that makes use of the typography plugin you can use the legacy target:

export default {
  theme: {
    // …
  },
  plugins: [
    // …
    require("@tailwindcss/typography")({ target: "legacy" }),
  ]
}

I wouldn't count on this option existing forever as :where is otherwise widely supported and has been for 3–4 years depending on the browser.