Hello,
We are creating a RoR project (Rails 7 + Esbuild). We are using tailwindcss to do most of our styling. We re looking to leverage tailwind in our mailer templates. A recommendation came through suggesting that we could actually use premailer to help us use tailwind classes in our email templates.
This sounded fun until we remembered that tailwind heavily uses css variables, for which case we could have these them compiled to normal css that can be interpreted by mail clients.
A few searches online pointed to using postcss but I am not so sure how to configure it with tailwind css.
// app/views/layouts/mailer.html.erb
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
</head>
<body>
<%= yield %>
</body>
</html>
//postcss.config.js
module.exports = {
plugins: [
require('postcss-css-variables'),
require('tailwindcss'),
require('autoprefixer'),
],
};
// tailwind config
module.exports = {
content: [
"./app/views/**/*.html.erb",
"./app/helpers/**/*.rb",
"./app/assets/stylesheets/**/*.css",
"./app/javascript/**/*.js",
],
...
Our build:css script is as thus:
"build:css": "tailwindcss -i ./app/assets/stylesheets/application.tailwind.css -o ./app/assets/builds/application.css --minify"
The question is I am not so sure how I would include postcss the build script to work with both tailwind and compile that to normal css.
Is there a way around this, preferably with an example of how to get all the 3 moving parts working together or any better suggestions on the whole approach?
