[v4] keyframes ouput by @tailwindcss/theme

[cossssmin]

Hey! When using @tailwindcss/theme it outputs the @keyframes definitions at the end:

@keyframes spin {
  to {
    transform: rotate(360deg)
  }
}

/* etc. */

Could these be moved to @tailwindcss/base by any chance?

My issue is, as always, with emails 🫣 Animations are almost never used in HTML emails, so I'd have to remove them manually from the output. The problem with that is that some users might actually need them, like when using Maizzle to build a small landing page or when coding progressively enhanced emails, in which case they might write @keyframes that use the same names, like bounce - so it's not ideal to parse their input CSS and remove them.

Thanks!

[adamwathan]

Hey! These are only output if a corresponding --animate-* variable exists, so if you know the animations won't be used you can remove the keyframes by doing this:

@theme {
  --animate-*: initial;
}

Does that help?

[cossssmin]

So if I could disable them through a preset in the JS config, and then the user could re-enable them in their own JS config it would work, yes. I suppose that’d be part of figuring out disabling corePlugins right?

Since I just process whatever CSS they provide I can’t really trust they will always know to disable them.

Would moving them to base not work/open up other issues?

[cossssmin]

Btw one reason for this is also that size matters in HTML emails, even 1KB helps sometimes in context of Gmail clipping emails that are over ~102KB. Also I’d probably hate myself if someone ever creates an email with like a 1KB of ‘bloat’ that could have been prevented, and that email is sent millions or billions of times 🙈

[cossssmin]

I'll try and use that yes. You're right, the best thing would be to provide users with a CSS file that they import - something like @import '@maizzle/tailwindcss'; - and do all the overrides in that 👍