Tailwind

ETailwind compiles Tailwind v4 utilities into email-safe inline styles and head rules during server rendering.

ETailwind is the server-only Tailwind v4 boundary. It compiles utilities used by its subtree into email-safe output during rendering. Wrap the whole document so a <head> is available inside the boundary.

Prop	Contract
`config`	Optional Tailwind config (everything except `content`), matching React Email's `TailwindConfig`.
`theme`	Optional raw CSS appended to the `@theme` layer.
`utility`	Optional raw CSS appended to the utilities layer.

Utility classes on descendant elements are inlined into each element's style, with precedence component defaults < Tailwind utilities < author style. Rules that cannot be inlined (media queries, pseudo-classes) are collected into a <style> in the <head>, residual class names are sanitized, and mso-* properties survive inlining. If a class needs a <head> and none is present inside the boundary, rendering throws with a message naming the offending classes.

Nuxt theme values are explicit

ETailwind does not consume your Nuxt app stylesheet or inherit browser CSS variables. Email classes must compile to concrete values. Pass a theme string or config to the boundary, ideally sourced from the same application-owned design-token module that feeds your web CSS.

The render path is filesystem-free. ETailwind accepts config, theme, and utility values, but does not resolve arbitrary CSS file imports or CSS @plugin module imports while rendering. Put executable plugins in config.

vue

<ETailwind>
  <EHtml>
    <EHead />
    <EBody class="bg-gray-100">
      <EContainer class="p-4">
        <EText class="text-red-500">Styled with Tailwind</EText>
      </EContainer>
    </EBody>
  </EHtml>
</ETailwind>

Nested-component classes work too

Nuxt Email also inlines classes that a nested component emits. A reusable card or button therefore uses the same Tailwind behavior as inline markup. Read the Tailwind guide for the supported boundaries.

Limitations at a glance

ECodeInline, EMarkdown, EPreview, and EFont do not treat a nested class as a Tailwind style target; nested <ETailwind> boundaries are not supported; and render-time CSS/@plugin filesystem imports are not resolved. Emails that do not use <ETailwind> are entirely unaffected. Full detail in the Tailwind guide.

For the seventeen ETailwind conformance cases, see the conformance report.