API render not including Tailwind styles for components and layouts.

Related issue: #565

• Maizzle Version: 4.0.2
• Node.js Version: v14.19.3 (in Codesandbox) and v16.14.1 (in my Dev Machine)
• Reproducible Repo

Firstly, thank you for making this framework. It makes developing email templates a breeze.

The issue I am reporting is similar to #565 (most likely the same). After going through that issue I realized that no one provided a reproducible repository for it. So have provided the same below.

The gist/summary of #565 issue (so you don’t have to go through that entire thread all over again):

1. Tailwind styles are output correctly in page.css placeholder in Dev server running through maizzle serve.
2. Tailwind styles are not output correctly in page.css placeholder when using API. And it affects only Layouts and Components. Tailwind styles are correctly applied to Templates.

To reproduce this issue, please open the Codesandbox Sandbox I have created here. I have linked directly to the README so you will be able to follow the instructions there.

Have also attached screenshots of the steps involved in getting the Sandbox up and running for your convenience (if you get stuck anywhere please don’t hesitate to holler at me):

1. By default, the Node sandbox server runs whatever is preconfigured with the Template itself. Ignore that port.
2. Open two new terminal tabs in the Codesandbox environment like so:

1. In the first Terminal tab, navigate to the “maizzle” sub-directory and install NPM dependencies. Run the following commands:

$ cd maizzle
$ npm i

As shown below:

1. Then run the dev server from within the “maizzle” sub-directory. You will be prompted with a popup asking your permission to open a new browser tab pointing to Port 4000. Please confirm.

$ npm run dev

Shown below:

1. New browser tab opens within the Sandbox which presents you with the file browser UI. Please click on confirm-user.html link. It should load the template perfectly as shown below:

1. Now click on the second terminal and run the following command:

$ node maizzle-test.js

1. It should prompt you to open a new browser pane. Please confirm.

1. The browser pane should open automatically and you should be presented with the output from API service. As you can see, the styles do not render for both “layouts”, “components”. Essentially anything that is extended/imported.

1. Inspecting the Frame source, these are the only styles from Tailwind that are applied (note that all of them only belong to the classnames of elements defined within the “Template”. They do not include any classnames from either the “layout” or the “component”.

This makes me wonder if the Tailwind styles are being applied only for the Template string that is passed to the “render” API and is not waiting for the final HTML to be rendered (after fetching “layout” and “component” HTML and merging it with the “template”).

I haven’t dug into the source. But first wanted to provide a reproducible repo and log the issue.

[cossssmin]

Hey thanks for the detailed report 😃

You need to tell Tailwind to scan your layouts and components directories - when using the API, these are not pre-set like they are with the CLI command.

[Jank1310]

Had the same problem as @shripadk. It would be great if some notice regarding this could be added to the “gotchas” section in https://maizzle.com/docs/api 👀