search

Faire / mjml-react

React component library to generate the HTML emails on the fly
https://www.npmjs.com/package/@faire/mjml-react
MIT License
375 stars 16 forks source link

Tailwind Support Feasibility? #70

Closed SSardorf closed 1 year ago

SSardorf commented 1 year ago

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.

IanEdington commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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