CODEWITHSUNDEEP
csstailwind-cssnext.js13nextjs14react-email
Pasan Kalhara
Pasan Kalhara

Reputation: 11

Issue with TailwindCSS in React Email Component: Unable to Apply Gradient Text

I'm trying to use TailwindCSS to style text with a gradient inside a React email component, but it's not working as expected in my email template. The gradient text styling works fine in a regular React component, but when used in the email component with @react-email/components, the gradient isn't applied.

Stack:

"next": "^15.0.4",
"tailwindcss": "^3.4.16",
"react-email": "^3.0.4",
"@react-email/components": "^0.0.30",
"@react-email/tailwind": "^1.0.3",

Here's my working React component with TailwindCSS that applies the gradient text properly:

import React from "react";

function Page() {
  return (
    <div className="bg-gradient-to-r from-teal-500 to-orange-500 bg-clip-text text-2xl font-semibold text-transparent">
      page
    </div>
  );
}

export default Page;

And here's the email component code where I'm trying to use the same styling, but it's not working:

import {
  Body,
  Container,
  Column,
  Head,
  Hr,
  Html,
  Img,
  Link,
  Preview,
  Row,
  Section,
  Text,
  Tailwind,
} from "@react-email/components";
import * as React from "react";
import tailwindConfig from "tailwind.config";

export const Email = () => (
  <html>
    <head />
    <Preview>Payment Receipt</Preview>

    <body className="bg-white p-5 font-sans">
      <Tailwind config="{tailwindConfig}">
        <Container className="mx-auto w-full max-w-[600px] rounded-lg bg-gray-50 p-5 shadow-md">
          <section>
            <Row>
              <Column className="bg-gradient-to-r from-teal-500 to-orange-500 bg-clip-text text-2xl font-semibold text-transparent">
                SOME NAME
              </Column>

              <Column align="right" className="py-2">
                <Text className="text-2xl font-semibold text-gray-800">
                  Payment Receipt
                </Text>
              </Column>
            </Row>
          </section>
        </Container>
      </Tailwind>
    </body>
  </html>
);

But it worked with style tag

<Heading className="flex flex-col gap-0.5 text-base">
  Welcome To
  <span
    style={{
      background: "linear-gradient(to right, #06b6d4, #e7902c)",
      WebkitBackgroundClip: "text",
      WebkitTextFillColor: "transparent",
      color: "black",
    }}
    className="text-5xl font-extrabold"
  >
    SOME NAME
  </span>
</Heading>;

Problem: The gradient text styling (bg-gradient-to-r from-teal-500 to-orange-500) doesn't seem to apply inside the email component. The text is not showing the gradient effect, and it remains a solid color instead of transitioning.

Questions:

I expected that the gradient text styling (bg-gradient-to-r from-teal-500 to-orange-500) would be applied and rendered correctly in the email component, similar to how it works in the regular React component.

Upvotes: 0

Views: 127

Answers (0)

Related Questions