Are tailwind plugins supported, like `@tailwindcss/typography`? #1058

stonix26 · 2023-11-30T18:48:52Z

stonix26
Nov 30, 2023

This is a question for now because I don't know if there's already an open issue about this. Actually, I have two issues here: css variables seems not working, and tailwind plugins also seems not working, especially the @tailwindcss/typography.

The component below receives a value of html string coming from my richtext-editor, then parsed inside the component.

import parse from 'html-react-parser'
import { Body, Head, Html, Tailwind, render } from '@react-email/components'
import defaultTheme from 'tailwindcss/defaultTheme'
import twTypography from '@tailwindcss/typography'

const EmailContent = ({ content }: { content: string }) => {
  return (
    <Html lang='en' dir='ltr'>
      <Head />
      <Tailwind
        config={{
          theme: {
            extend: {
              colors: {
                primary: {
                  50: 'var(--primary-50)',
                  100: 'var(--primary-100)',
                  light: 'var(--primary-light)',
                  DEFAULT: 'var(--primary-DEFAULT)',
                  dark: 'var(--primary-dark)',
                  darker: 'var(--primary-darker)'
                },

                secondary: {
                  50: 'var(--secondary-50)',
                  100: 'var(--secondary-100)',
                  light: 'var(--secondary-light)',
                  DEFAULT: 'var(--secondary-DEFAULT)',
                  dark: 'var(--secondary-dark)',
                  darker: 'var(--secondary-darker)'
                },

                success: {
                  50: 'var(--success-50)',
                  100: 'var(--success-100)',
                  light: 'var(--success-light)',
                  DEFAULT: 'var(--success-DEFAULT)',
                  dark: 'var(--success-dark)',
                  darker: 'var(--success-darker)'
                },

                warning: {
                  50: 'var(--warning-50)',
                  100: 'var(--warning-100)',
                  light: 'var(--warning-light)',
                  DEFAULT: 'var(--warning-DEFAULT)',
                  dark: 'var(--warning-dark)',
                  darker: 'var(--warning-darker)'
                },

                danger: {
                  50: 'var(--danger-50)',
                  100: 'var(--danger-100)',
                  light: 'var(--danger-light)',
                  DEFAULT: 'var(--danger-DEFAULT)',
                  dark: 'var(--danger-dark)',
                  darker: 'var(--danger-darker)'
                },

                info: {
                  50: 'var(--info-50)',
                  100: 'var(--info-100)',
                  light: 'var(--info-light)',
                  DEFAULT: 'var(--info-DEFAULT)',
                  dark: 'var(--info-dark)',
                  darker: 'var(--info-darker)'
                },

                default: {
                  50: 'var(--default-50)',
                  100: 'var(--default-100)',
                  light: 'var(--default-light)',
                  DEFAULT: 'var(--default-DEFAULT)',
                  dark: 'var(--default-dark)',
                  darker: 'var(--default-darker)'
                }
              },
              typography: ({ theme }: { theme: any }) => ({
                playbookRTE: {
                  css: {
                    '--tw-prose-body': theme('colors.secondary.dark'),
                    '--tw-prose-headings': theme('colors.secondary.darker'),
                    '--tw-prose-lead': theme('colors.secondary.darker'),
                    '--tw-prose-links': theme('colors.secondary.darker'),
                    '--tw-prose-bold': theme('colors.secondary.darker'),
                    '--tw-prose-counters': theme('colors.secondary.dark'),
                    '--tw-prose-bullets': theme('colors.secondary.DEFAULT'),
                    '--tw-prose-hr': theme('colors.secondary[100]'),
                    '--tw-prose-quotes': theme('colors.secondary.darker'),
                    '--tw-prose-quote-borders': theme('colors.secondary[100]'),
                    '--tw-prose-captions': theme('colors.secondary.darker'),
                    '--tw-prose-code': theme('colors.secondary.darker'),
                    '--tw-prose-pre-code': theme('colors.secondary[50]'),
                    '--tw-prose-pre-bg': theme('colors.secondary.darker'),
                    '--tw-prose-th-borders': theme('colors.secondary[100]'),
                    '--tw-prose-td-borders': theme('colors.secondary.light'),
                    '--tw-prose-invert-body': theme('colors.secondary.light'),
                    '--tw-prose-invert-headings': theme('colors.white'),
                    '--tw-prose-invert-lead': theme('colors.secondary[100]'),
                    '--tw-prose-invert-links': theme('colors.white'),
                    '--tw-prose-invert-bold': theme('colors.white'),
                    '--tw-prose-invert-counters': theme(
                      'colors.secondary.DEFAULT'
                    ),
                    '--tw-prose-invert-bullets': theme('colors.secondary.dark'),
                    '--tw-prose-invert-hr': theme('colors.secondary.darker'),
                    '--tw-prose-invert-quotes': theme('colors.secondary[50]'),
                    '--tw-prose-invert-quote-borders': theme(
                      'colors.secondary.darker'
                    ),
                    '--tw-prose-invert-captions': theme(
                      'colors.secondary.DEFAULT'
                    ),
                    '--tw-prose-invert-code': theme('colors.white'),
                    '--tw-prose-invert-pre-code': theme(
                      'colors.secondary[100]'
                    ),
                    '--tw-prose-invert-pre-bg': 'rgb(0 0 0 / 50%)',
                    '--tw-prose-invert-th-borders': theme(
                      'colors.secondary.dark'
                    ),
                    '--tw-prose-invert-td-borders': theme(
                      'colors.secondary.darker'
                    )
                  }
                }
              })
            }
          },
          plugins: [twTypography]
        }}
      >
        <Body>
          <div className='tiptap ProseMirror prose prose-playbookRTE'>
            {parse(content)}
          </div>
        </Body>
      </Tailwind>
    </Html>
  )
}

Here I want my email to look exactly with my richtext-editor.

Is there already a solution on this that I am missing?

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Are tailwind plugins supported, like `@tailwindcss/typography`? #1058

Uh oh!

{{title}}

Uh oh!

Replies: 0 comments

Select a reply

Uh oh!

Are tailwind plugins supported, like @tailwindcss/typography? #1058

Uh oh!

stonix26 Nov 30, 2023

Replies: 0 comments

Are tailwind plugins supported, like `@tailwindcss/typography`? #1058

stonix26
Nov 30, 2023