EDIT: I think I found a fix here

https://github.com/vercel/satori/issues/503

---


I'm trying to generate OG images that use a [Material Tailwind](https://www.material-tailwind.com/docs/v3/react/colors) theme that is working in the rest of the project.

I found https://vercel.com/guides/using-tailwind and am able to have basic tailwind working in these og image with tw="" tags.

However, these tags don't seem to inherit the custom class names generated by the theme in tailwind.config.ts

I've tried manually importing the theme to set properties directly, but this results in a webpack error.

Any ideas on how I can achieve these theme imports with next/og tailwind ?

// attempt at og image component
import { mtConfig } from "@material-tailwind/react"; // the plugin, mtConfig is undefined
import tailwindConfig from "@/tailwind.config"; // Import Tailwind config
// planned usage
style={{ color: tailwindConfig.theme.extend.colors.primary }}

import { mtConfig } from "@material-tailwind/react";
// tailwind.config.ts
const config: Config = {
  content: [
    "./node_modules/@material-tailwind/react/**/*.{js,ts,jsx,tsx}",
  // ...
  plugins: [
    mtConfig({ 
      // ...

export default config;

 ⨯ TypeError: (0 , _material_tailwind_react__WEBPACK_IMPORTED_MODULE_0__.mtConfig) is not a function
    at eval (webpack-internal:///(rsc)/./tailwind.config.ts:74:75)
    at (rsc)/./tailwind.config.ts (/workspaces/xxx/.next/server/app/[locale]/page.js:1317:1)
    at __webpack_require__ (/workspaces/xxx/.next/server/webpack-runtime.js:33:42)