# API
Use the Maizzle API to compile a string to an HTML email.
## Example
```js [app.js]
import { render } from '@maizzle/framework'
import tailwindcssPresetEmail from 'tailwindcss-preset-email'
let input = `---
title: Hello, world!
---
{{ page.title }}
`
const { html } = await render(input,
{
css: {
inline: true,
purge: true,
shorthand: true,
tailwind: {
presets: [tailwindcssPresetEmail],
content: [
{
raw: input,
extension: 'html'
}
]
}
}
}
)
console.log(html)
```
Your `html` string must include at least `` inside the ``, otherwise no CSS will be output or inlined.
Notice also the `css.tailwind` config.
The `content` key is needed for Tailwind to know where to look for classes to generate - otherwise your `
Test
`
const { html } = await render(input, {
css: {
tailwind: {
presets: [tailwindcssPresetEmail],
content: [
{
raw: input,
extension: 'html'
}
]
}
}
})
```
In order for Tailwind to actually generate CSS based on classes in your `input` string, you need to pass the `content` key with an array of objects that contain the raw content and the file extension.
## Templating
Of course, templating tags are available when using Maizzle programmatically.
```js [app.js]
let html = `---
title: Using Maizzle programmatically
---
`
```
Paths to Layouts or Components in your string must be relative to the location where you execute the script.
Component
`x-`
tags only work in Node.js and when the referenced files are available on disk.
## Gotchas
Since the options object that you can pass to the `render` method is optional, there are a few gotchas that you need to be aware of.
### Tailwind config
Maizzle will use the Tailwind CSS config object as-is, which means that if you just include the `content` key it will generate CSS with the default values like `rem` or CSS variables.
In order to generate CSS optimized for HTML email, you need to fully configure Tailwind in the `css.tailwind` object. The simplest way to do this is to use a preset like `tailwindcss-preset-email`, as shown in the example above.
### Default Tailwind
If you don't specify a [Tailwind config object](#tailwindcss), Maizzle will try to compile Tailwind using `tailwind.config.js` at your current path.
*If the file is not found, Tailwind CSS will be compiled with its default config.*
The default config is not optimized for HTML email: it uses units like `rem` and CSS properties that are used for *web* design and which have little to no support in the majority of email clients.
Also, the default Tailwind config will not include any `content` paths that should be scanned for generating utility classes, meaning that the ` /* [!code ++] */
...