Improved Performance for Tailwind Emails

When we started react.email, the idea was to make modern web development tooling, like Tailwind CSS, available for the email ecosystem.

But for some time, the <Tailwind /> component had a few problems, leading users to go back into using inline styles. This is not the experience we wanted for developers.

That's why we're excited to announce a major performance improvement. The render time for Tailwind emails is now 23x faster.

These are numbers from benchmarks on real-world email templates.

Benchmark Results

We used the Tinybench library to run the tests. The tests were run on a Linux machine with a 3.6 GHz 6-core AMD Ryzen 5 4500 CPU and 16 GB 3600 MHz DDR4 memory.

The sample size was 100 email renders for each test, and the same email template was used for all the tests. The results are in nanoseconds per operation.

┌─────────┬───────────┬─────────┬────────────────────┬──────────┬─────────┐
│ (index) │ Task Name │ ops/sec │ Average Time (ns)  │  Margin  │ Samples │
├─────────┼───────────┼─────────┼────────────────────┼──────────┼─────────┤
│    0    │  after    │    8    │ 120386175.23986846 │  ±2.07%  │   100   │
│    1    │  before   │    0    │ 3326383692.750111  │  ±0.72%  │   100   │
└─────────┴───────────┴─────────┴────────────────────┴──────────┴─────────┘

Here are the results before the performance improvements:

p75: 3385ms
p99: 3681ms

And here are the results after the performance improvements:

p75: 126ms
p99: 156ms

We can see that the p99 is 23x faster, and the p75 is 26x faster.

What changed

The greatest point of performance degradation that we had before was with the way we ran Tailwind to generate the styles for classes. Every time the component would come across a className, it would start tailwind alongside postcss, which was unnecessary.

To fix this, we changed the component to render the whole React element tree. Then, we ran Tailwind on it to know which inline styles to substitute for each class name.

We then created a map of the inline styles associated with the class names as keys. After that, we added these inline styles from the map to each element that uses these class names. This means the second traversal grows linearly instead of exponentially.

Upgrading to the new version

1. Upgrade package versions

If you are importing the Tailwind component from @react-email/components you can update it to version 0.0.12.

npm i @react-email/components@0.0.12

Or if you are importing it directly from @react-email/tailwind you can update it to version 0.0.13.

npm i @react-email/tailwind@0.0.13

2. Change component order if you use media queries

If you are using Tailwind classes that renders into media queries like dark mode, you'll have to change the order in which the components are defined.

You need to move the Tailwind component from wrapping the <Html /> component followed by the <Head /> component to just directly wrapping the <Head /> component.

const Email = () => (
  <Html>
    <Tailwind>
      <Head />
    </Tailwind>
  </Html>
);

Conclusion

If you want to know more about this update, including technical details, and stability improvements, check the React Email Changelog.

If you have any problems upgrading, feel free to share on GitHub, Discord or X.