Rework Tailwind support

[kevinwolfcr]

Hello! I have been testing the experimental support for Tailwind and came up with some issues. Some of them are:

• Support for custom configuration is broken, if I use a custom plugin, it won't work.
• Doesn't work with arbitrary values.

After days of testing and trying different solutions, I found the library tw-to-css, and it made a really good work and supports custom tailwind config, arbitrary values and plugins without any troubles.

Here is the code I used, in case it could be useful for this library, I'm happy to make a PR as well if you want to introduce it!

import type { CSSProperties, ReactElement } from "react"
import type { TailwindConfig } from "tw-to-css"

import { Parser } from "html-to-react"
import { ImageResponse } from "next/server"
import { Children, cloneElement, isValidElement } from "react"
import { tailwindToCSS } from "tw-to-css"

type OgElement = ReactElement<{
  className?: string
  style?: CSSProperties
  children?: OgElement[]
}>

export async function ogResponse(el: OgElement, opts: { debug?: boolean } = {}) {
  const { renderToStaticMarkup } = await import("react-dom/server")
  const { twj } = tailwindToCSS({ config: (await import("../../../../../tailwind.config")).default as TailwindConfig })
  const jsx = inlineTailwind(new Parser().parse(renderToStaticMarkup(el)) as OgElement)

  function inlineTailwind(el: OgElement): OgElement {
    const { className, children, ...props } = el.props
    let style: OgElement["props"]["style"] = {}

    if (className) {
      style = twj(className.split(" "))
    }

    return cloneElement(
      el,
      { ...props, style },
      Children.map(children, (child) => (isValidElement(child) ? inlineTailwind(child) : child)),
    )
  }

  if (opts.debug) {
    return new Response(renderToStaticMarkup(jsx), { headers: { "content-type": "text/html" } })
  }

  return new ImageResponse(jsx)
}