Skip to content

chore(tailwind): Add support for responsive classes and custom nested components #502

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
merged 6 commits into from
Feb 26, 2023
Merged

chore(tailwind): Add support for responsive classes and custom nested components #502

merged 6 commits into from
Feb 26, 2023

Conversation

@vinicoder
Copy link
Contributor

@vinicoder vinicoder commented Feb 24, 2023 •
edited
Loading

This PR brings some upgrades to the Tailwind component:

🌈 Support for responsive styles:

Using responsive styles is not something that can be done inline, so when adding responsive styles, the component will automatically place its code in the style tag inside the head tag of your email, which is why html and head tags are required in your code. For example:

<Tailwind>
  <Html> // <-- Required
    <Head /> // <-- Required
    <Section>
      <div className="bg-red-200 sm:bg-red-300 md:bg-red-400 lg:bg-red-500" />
    </Section>
  </Html>
</Tailwind>

Some changes were also necessary to make this happen, such as escaping the class names because some email clients do not support them.

Before: md:bg-red-400
After: md_bg_red_400

🎁 Support for custom nested components:

In the past, we used React.Children to nest components. But it didn't play nice with children that had more than one node element or no children defined. Not cool. Now, this component reads all the content, renders it, and applies the right styles.

🧪 Bonus: Unit tests

Additionally, unit tests were implemented to ensure that most of the features are working correctly.
CleanShot 2023-02-23 at 11 35 24

🚨 Important

Although we're using Tailwind, not all CSS properties work across all email clients. So while it gives you the freedom to create, it's up to you to decide what you want to prioritize. If you need clarification on what's good or not for your email, check out https://www.caniemail.com/.

Should fix: #462, #448, #451

@vinicoder vinicoder mentioned this pull request Feb 24, 2023
Closed
@Brettm12345
Copy link

Brettm12345 commented Feb 25, 2023

Could we get this merged soon? It's very critical for my use case

@bukinoshita
Copy link
Member

bukinoshita commented Feb 26, 2023

Thanks @vinicoder !

@bukinoshita bukinoshita merged commit 20b30c1 into resend:main Feb 26, 2023
@ysm-dev
Copy link

ysm-dev commented Feb 27, 2023

Looks there is some bug on this PR.
Suddenly, My Button Component got weird style padding: 0px 0px after bump this package to 0.0.5
so my tailwind styles are ignored.

image

image

@vinicoder
Copy link
Contributor Author

vinicoder commented Feb 27, 2023

Looks there is some bug on this PR. Suddenly, My Button Component got weird style padding: 0px 0px after bump this package to 0.0.5 so my tailwind styles are ignored.

image image

Got it! This happens because the component's default styles override Tailwind's styles (you can do a test by replacing the Button component with an anchor/div tag or any other tag). I'm fixing this and will send a PR later today. Thanks for reporting @ysm-dev! I will also add this to the test coverage.

@vinicoder vinicoder mentioned this pull request Feb 27, 2023
Merged
@vinicoder
Copy link
Contributor Author

vinicoder commented Feb 27, 2023

@ysm-dev I just opened a new PR with the fix: #508

niicojs pushed a commit to niicojs/react-email that referenced this pull request Mar 23, 2023
@vinicoder @niicojs
chore(tailwind): Add support for responsive classes and custom nested…
826f4d0 
… components (resend#502)
@jeanhdev
Copy link

jeanhdev commented Oct 11, 2023 •
edited
Loading

hey - any update on this? thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Responsive column

5 participants

@vinicoder @Brettm12345 @bukinoshita @ysm-dev @jeanhdev