The package uses Tailwind CSS via @react-email/components. Tailwind intellisense is configured and should work automatically in your IDE. The config files are:

tailwind.config.js - Tailwind configuration for intellisense
postcss.config.js - PostCSS configuration

Path Aliases

Use @/ prefix for clean imports:

import { FollowUpEmail } from "@/emails/survey/follow-up-email";
import { EmailTemplate } from "@/src/components/email-template";
import { mockT } from "@/src/lib/mock-translate";

Usage in Production

The web app imports render helper functions from this package:

import { renderVerificationEmail } from "@formbricks/email";

// Pass real translation function and data
const html = await renderVerificationEmail({
  verifyLink,
  verificationRequestLink,
  t, // Real i18n function from getTranslate()
});

For complex emails with pre-processing:

import { renderResponseFinishedEmail } from "@formbricks/email";
import { getElementResponseMapping } from "@/lib/responses";

// Pre-process data before rendering
const elements = getElementResponseMapping(survey, response);

const html = await renderResponseFinishedEmail({
  survey,
  responseCount,
  response,
  WEBAPP_URL,
  environmentId,
  organization,
  elements, // Pre-processed data
  t,
});

Architecture

Preview Mode: Templates use mock t() function and example data for visual QA
Production Mode: Web app passes real t() function and pre-processed data
Render Functions: Typed helper functions abstract @react-email/render from web app
No Business Logic: SMTP, i18n, JWT, database queries, and data processing stay in web app
Clean Separation: Web app processes data → Email package renders HTML