Certain tw classes are not working in the playground

[wjthieme]

In the playground the following works:

<div tw="w-full h-full bg-rose-500" />

But 950 color classes don't even though they are valid tw colors:

<div tw="w-full h-full bg-rose-950" />

Gradients also do not seem to work:

<div tw="w-full h-full bg-gradient-to-t from-rose-500 via-sky-500 to-rose-500" />

Another class that I have observed to not be working is gap.

Custom tw background-sizes also do not seem to be working (when having the tw config supplied to satori)

// tw config:
backgroundSize: {
  lg: "500% 500%",
}

<div tw="w-full h-full bg-lg" />

In the logs I can see the following errors for these tw classes: 'rose-950' unknown or invalid utility

[erxclau]

950 colors are currently not working because Tailwind is installed with v3.1.8:

https://github.com/vercel/satori/blob/b54f510807b7f5b8503e02509a83dc3ede06d317/pnpm-lock.yaml#L8515

950 colors were introduced in v3.3: https://tailwindcss.com/blog/tailwindcss-v3-3#extended-color-palette-for-darker-darks.

Regarding gradients, it looks like the underlying library that Satori uses for Tailwind support (twrnc) does not plan to support gradients given that React Native does not support gradients out of the box: https://github.com/jaredh159/tailwind-react-native-classnames/issues/294.

Bumping twrnc to the latest version will allow for gap to work but does not also bump the Tailwind version from v3.1.8.