Styling Emails with Tailwindcss
Thanks to Lucan van Staden for sharing this approach!
Many thanks to Lucan van Staden from ProxiBlue for first documenting this approach and sharing it!
Lucas was tasked to build emails for a site, and as per Hyva docs styles for email need to be built using Less. So basically no nice Tailwind utility classes.
This will not do - he wanted to use tailwind classes, even if just to generate the css that will be used in the end.
So what he came up with was not too difficult to set up, and using
@apply, a style sheet can be generated.
This means utility classes can be used as a source for email style generation.
Here is his setup (this is just a first attempt, so if you see something that can be done better, please speak up).
The following all happens in a theme folder (
app/design/frontend/Vendor/ThemeName) after following the preparations on the Styling Emails documentation.
Create a folder in your theme:
Create a custom postcss config inside the new
postcss.config.js(the postcss cli can specify a config folder, not a config file, so that is why we need the
The content of the new config file
This is to specify a new tailwind config file. Why? Seems Less cannot handle the rgba color syntax:
Now create an alternative tailwind config file named
tailwind.email.config.js, but in the
emails/folder (just to keep it all nice and contained)
Place its content as follows.
This disabled the rgba colors, and colors will be basic HEX, so Less does not choke.
Install postcss-cli plugin by running the command
Edit the theme
package.jsonand add a new script action:
theme/folder, and the output must override the base
_theme.lessfile, as what you had copied over following the Hyva docs noted above.
_theme.less from git
web/css/source/_theme.less should be excluded from git when following this approach, since it is generated each time
email-build is run.
Tailwind CSS for Emails Example
Create an example
theme/email.css file containing:
npm run build-email
% npm run build-email ✔ /vagrant/sites/magento-pipeline/src/app/design/frontend/Bom/custom/web/tailwind 13:43 $ npm run build-email > firstname.lastname@example.org build-email /vagrant/sites/magento-pipeline/src/app/design/frontend/Bom/custom/web/tailwind > npx postcss --config ./emails theme/email.css -o ../css/source/_theme.less
_theme.less file now contains
Note: Lucas has not used this in production, but testing with yireo/magento2-emailtester2 it looks like it is working ok.
Using Tailwind to generate Less
This section might be expanded over time with tips and quirks to consider when using Tailwindcss to generate less.
Custom Background Images
When specifying a custom background image, be sure to encase the URL in single quotes, otherwise the param is not processed by less:
Using border styles like
border-t in emails doesn't work with the above setup.
We haven't had time to investigate why, so the issue can be overcome in the meantime with a bit of mixed vanilla styles declarations: