TW config plugins are not respected anymore in @react-email/components@1.0.3

[s-lukashenka-micoworks]

What versions are you using? (if relevant)

@react-email/components@1.0.3, react-email@5.1.1

Describe the Bug

In @react-email/components@1.0.3 it looks like the custom plugins that I have defined are no longer respected.
Roughly I have my email-specific TW config defined inside tailwind.config.ts like

export const emailConfig: Config = {
  content: ["./src/emails/**/*.{js,ts,jsx,tsx}", "./src/components/emails/**/*.{js,ts,jsx,tsx}"],
  theme: sharedTheme,
  plugins: [emailUtilities],
  presets: [pixelBasedPreset],
};

Am I doing something wrong?

What is affected (leave empty if unsure)

No response

Link to the code that reproduces this issue

A link to a GitHub repository minimal reproduction. Not your entire project, just the code necessary to reproduce the issue. Try going from the starter npx create-email@latest and adding only what's needed to cause the issue. If you don't share a reproduction, we might close the issue or it will take significantly longer for things to get sorted out.

To Reproduce

Steps to reproduce the behavior, please provide a clear description of how to reproduce the issue, based on the linked minimal reproduction. Screenshots can be provided in the issue body below. If using code blocks, make sure that syntax highlighting is correct and double check that the rendered preview is not broken.

Expected Behavior

Custom plugins defined like

const sharedUtilities = {
  ".btn": {
    "@apply rounded-full justify-center items-center inline-flex": {},
  },
};

are respected.

What's your node version? (if relevant)

No response

[gabrielmfern]

This isn't enough to reproduce the issue, but from what you've shared (and I'm missing the full picture here), you seem to be defining a plugin wrongly. For the plugin to work, it needs to be a callback, such as

plugins: [
  plugin(({ addUtilities }) => {
    addUtilities({
      '.text-body': {
        '@apply rounded-full justify-center items-center inline-flex': {},
      },
    });
  }),
]

One other thing that I would advise you on is not using flex box here, since it's not very well-supported in email, and React Email does not modify your email template to the point of allowing these to work.

Since this isn't enough to reproduce the issue, and you haven't quite followed our issue template, I'm going to close this as not planned, but if you do share a reproduction for it, and we're able to reproduce, I will reopen.

[s-lukashenka-micoworks]

@gabrielmfern Thank you for the suggestions! It was something not related to the plugin definition way: I had a custom utility class like: "@apply bg-mv-primary-600 text-white hover:bg-black", and deleting hover:bg-black` had the effect of styles being applied again.