TailwindConfig type changed in react-email 3.0

[razzeee]

Describe the Bug

Setting a config for tailwind errors out with the 3.0 release

flathub-infra/website#3763

https://github.com/flathub-infra/website/actions/runs/10522369333/job/29154863956?pr=3763

Run yarn build
Error: emails/base.tsx(57,9): error TS2740: Type '{ theme: { extend: { colors: { "flathub-celestial-blue": string; }; }; }; }' is missing the following properties from type 'TailwindConfig': prefix, important, separator, safelist, and 7 more.
Error: Process completed with exit code 2.

Which package is affected (leave empty if unsure)

@react-email/tailwind

Link to the code that reproduces this issue

flathub-infra/website#3763

To Reproduce

Try to use

<Tailwind
        config={{
          theme: {
            extend: {
              colors: {
                "flathub-celestial-blue": "hsl(211, 65%, 57%)",
              },
            },
          },
        }}
      >

Expected Behavior

It should probably still keep working as it is. Otherwise, there should have been instructions on the change and the docs on the website also would need an update.

What's your node version? (if relevant)

No response

[gabrielmfern]

Can't quite reproduce this, are you sure it isn't something on your side?

[gabrielmfern]

Found out what it is, the issue is because you don't have Tailwind installed on your backend. What happens is that we bundle Tailwind on our side, that means that after compilation, Tailwind is not something that can be imported anymore. If it was a dependency, it could cause issues, but I'm going to explore on that a bit more later to make sure it wouldn't be fine.

The problem, then, is that Tailwind is not installed, and its types are not bundled in, meaning that it can't find the types and breaks like that. Now, I think this only happens after the upgrade to [email protected] because it used to include Tailwind as a dependency and doesn't anymore, as we have optimized it a lot.

Thanks for pointing this out! Will take a look at fixing.

[gabrielmfern]

Could not have done it without a link to the code that reproduces, thanks for that.

[angelhodar]

I have just had the same issue when building after upgrading to [email protected]. I have added ``@ts-expect-error```just above the config prop until the issue is fixed :)