MailCSS

MailCSS is a type-safe, compatibility-aware CSS-in-JS library designed specifically for inline styles in emails. It integrates real-time data from Can I Email to provide immediate feedback on CSS support across various email clients.

Installation

npm install mailcss
# or
pnpm add mailcss

Getting Started

1. Configure your Design System: Create a configuration file (e.g., emails/css.ts) to define your theme and validation settings.

// emails/css.ts
import { defineConfig } from "mailcss";

export const { css } = defineConfig({
  validationMode: "warn",
  extended: {
    theme: {
      tokens: {
        colors: {
          brand: { blue: { value: "#2754C5" } },
        },
      },
    },
  },
});

2. Use it in your components: Import the generated css function to style your React Email components.

import { css } from "./css";

export default function MyEmail() {
  return (
    <div style={css({ backgroundColor: "brand.blue", padding: "20px" })}>
      <h1 style={css({ color: "#ffffff", fontSize: "24px" })}>Welcome!</h1>
    </div>
  );
}

Documentation

• Configuration Reference: Detailed information on all configuration options.
• Theming Guide: Learn how to build a sophisticated design system with tokens and semantic aliases.