TailwindCSS with CSS Variables #1267
-
|
I have a {
theme: {
extend: {
colors: {
background: 'hsl(var(--color-background) / <alpha-value>)',
// ...
},
},
},
}declared in a @tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
:root {
--color-background: 0 0% 100%; /* white */
// ...
}
}When using the The following does not work: import { Container, Head, Html, Link, Tailwind, Text, Body } from '@react-email/components'
import tailwindConfig from '../../../../tailwind.config.ts'
import tailwindStylesheetUrl from '../../../styles/tailwind.css'
export function SomeEmail() {
return (
<Tailwind config={tailwindConfig}>
<Html lang="en" dir="ltr">
<Head>
<meta charSet="utf-8" />
<title>Welcome to André Casal!</title>
<style type="text/css">{tailwindStylesheetUrl}</style>
</Head>
<Body className="bg-background">
<Container>
<h1>
<Text>Welcome to André Casal!</Text>
</h1>
</Container>
</Body>
</Html>
</Tailwind>
)
} |
Beta Was this translation helpful? Give feedback.
Replies: 9 comments 7 replies
This comment has been hidden.
This comment has been hidden.
This comment was marked as off-topic.
This comment was marked as off-topic.
This comment was marked as off-topic.
This comment was marked as off-topic.
This comment was marked as off-topic.
This comment was marked as off-topic.
-
|
I figured out a way to use variables directly in your You can use the plugin I made a gist containing a demo, you can find it here Let me know if you have any issues |
Beta Was this translation helpful? Give feedback.
-
|
yes. without the plugin "@mertasan/tailwindcss-variables" its building but css variables wont work. and with plugin i cannot build the project |
Beta Was this translation helpful? Give feedback.
-
|
But maybe I dont understand it. I have my tailwind.config.ts with css variables. the css variables are defined in another file "theme.css" is this possible? |
Beta Was this translation helpful? Give feedback.
-
|
@barrynorman There is no current way to import a CSS file directly into an email, what you can do is read the file and add the CSS into a |
Beta Was this translation helpful? Give feedback.
-
|
It is not working for me as well. I receive my theme file as props, and besides my theme I also receive a selected color, as the main color will change according to it. In the react email preview it works fine, but in my email it doesn't. this is an example: |
Beta Was this translation helpful? Give feedback.
-
|
@NataliaFCavicchioli Does it not work when sending the email? If so, this is because CSS Variables are not well supported on most email clients at all. https://www.caniemail.com/features/css-variables/ In your case, the best option is to actually use the color as a JS variable instead of a CSS variable, but since you're using Tailwind that's a bit trickier. Here's how it would look like const buttonBg = theme?.[color_selected]?.main || '#161C24';
const buttonText = theme?.[color_selected]?.contrastText || '#FFFFFF';
<Body style={{ ...main }}>
<Section className={`text-2xl leading-[4.125rem] text-[${buttonText}] bg-[${buttonBg}] h-[4.125rem] text-center`}>
{code}
</Section>
</Body>Another possible option is to change the Tailwind configuration so that it has these colors as actual Tailwind colors. |
Beta Was this translation helpful? Give feedback.
This comment was marked as off-topic.
This comment was marked as off-topic.
This comment was marked as off-topic.
This comment was marked as off-topic.
This comment was marked as off-topic.
This comment was marked as off-topic.
This comment was marked as off-topic.
This comment was marked as off-topic.
@andrecasal @LeathanTeal
I figured out a way to use variables directly in your
<Tailwind/>component.You can use the plugin
@mertasan/tailwindcss-variablesNPM: @mertasan/tailwindcss-variables
I made a gist containing a demo, you can find it here
Let me know if you have any issues