Skip to main content

Tailwind

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

ETailwind

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

PropTypeDefaultRequired
configTailwind config except content—No
themestring—No
utilitystring—No

Utility classes on descendants become inline styles when possible. Rules that cannot be inlined move to a <style> in <head>. Rendering fails if such a rule has no head inside the boundary. Nested ETailwind boundaries also fail.

The Tailwind guide owns precedence, tokens, nesting, nested components, dark and responsive behavior, animation, limits, and compatibility evidence.

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