Ability to remove the use of Tailwind CSS variables

[kirkbushell]

First, I just want to say that I fully acknowledge why these exist - they're extremely useful and are necessary to support numerous features.

HOWEVER - they are quite problematic if you want to use Tailwind CSS for your emails (yes, it can work - and yes, it's possible). The issue is that many email clients will strip the offending CSS completely if it contains CSS variables. The reason for this is that they're simply not supported. Moreover, what ends up happening is that a client will remove not just the offending class - but ALL classes from the stylesheet, as a result. It makes it impossible to use tailwind CSS classes that contain variables, like colors.

Now, I've found out that we can disable certain core plugins, that use variables, like so:

corePlugins: {
  backgroundOpacity: false,
  borderOpacity: false,
},

This is fantastic, but I'm wondering if we could have something like "email mode", which basically strips any offending CSS generation from the build/generate step? This would make it much easier to get Tailwind CSS going for emails.

[kirkbushell]

Hello BeBallPlayers,

While Tailwind CSS is incredibly powerful and useful for web development, it can become problematic in the context of emails, where support for CSS features varies widely across different email clients.

Your workaround of disabling core plugins that utilize CSS variables, like backgroundOpacity and borderOpacity, is a step in the right direction. However, you're suggesting the idea of an "email mode" or a feature that automatically strips out any offending CSS generation during the build or generate step. This would essentially simplify the process of tailoring Tailwind CSS for email use by removing the reliance on CSS variables altogether.

Having such a feature would indeed streamline the process of using Tailwind CSS for emails, as it would eliminate the need for manual intervention to disable specific plugins. It would provide a more seamless experience for developers looking to leverage Tailwind CSS in their email templates without worrying about compatibility issues across different email clients.

Implementing an "email mode" or similar functionality could involve adding a specific configuration option or command-line flag that triggers the removal of CSS features incompatible with email clients. This would give developers greater control over Tailwind CSS's behavior when generating stylesheets for email templates, ultimately enhancing the usability and compatibility of Tailwind CSS in email development workflows.

I hope the information may helps you.

Best regards, Latonya86Dodson

@adamwathan spam bot.

[shiro]

I also want to use TW for email generation and can't use variables in my environment, any way to disable them in V4?

[Lakphy]

I'm having a similar problem, I'm using the Tailwind CSS when rendering the "Content Script UI" in the Chrome browser plugin, and I'm finding that none of the css variables in it are taking effect.