Skip to content
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

Tailwind Support Feasibility? #70

Closed
SSardorf opened this issue Nov 30, 2022 · 3 comments
Closed

Tailwind Support Feasibility? #70

SSardorf opened this issue Nov 30, 2022 · 3 comments

Comments

@SSardorf
Copy link

Hey,

Does anyone have an idea of how big of a workload implementing Tailwind would be?
Curious as to whether Tailwindcss support would even be feasible.
@SSardorf SSardorf changed the title Tailwind Support Tailwind Support Feasibility? Nov 30, 2022
@IanEdington
Copy link
Contributor

There was a conversation in the mjml slack channel about this: https://mjml.slack.com/archives/C12HESC2G/p1668923334850109

Here's my answer in that conversation:

I don't know enough about tailwindCSS build pipeline, but we use styled-components and found the best way to integrate them with mjml is in a post processing step (after getting the html).

  1. inline as much css as possible
  2. also add a <style> tag to <head>

We use juice for css inlining.

This is the relevant part of our build pipeline

  const css = getStyledComponentsStaticCss(styledComponentsStyleSheet.instance);
  const styleTag: string = css
    ? `<style type="text/css">${css}</style type="text/css">`
    : "";

  // inline only the styles from styled-components (style attributes are the best practice for email)
  let html = juice.inlineContent(mjmlHtml, css);
  //  add style tag for all styled-components styles (fallback for any styles that can't be inlined)
  html = styleTag ? html.replace("</head>", `${styleTag}</head>`) : html;

@IanEdington
Copy link
Contributor

IanEdington commented Nov 30, 2022 •
edited
Loading

Basically the core requirements are available to add something like tailwindcss or any other css tool, It's just a matter of writing a custom renderer. These are the renderers we have in the repo currently. It's an area that could definitely use improvement. Please let us know if you build anything that could be included here.

edit: also happy to answer any questions you have along the way

@IanEdington IanEdington mentioned this issue Jan 17, 2023
Open
@IanEdington
Copy link
Contributor

Closing as I believe tailwind is supported. If someone figures out how to configure it please submit a section to the readme.

@bchrobot bchrobot mentioned this issue Jul 28, 2023
Merged
2 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@IanEdington @SSardorf