@react-email/tailwind 0.0.1-3.canary.0

package/dist/index.d.mts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { Config } from 'tailwindcss';
+
+type TailwindConfig = Omit<Config, "content">;
+interface TailwindProps {
+    children: React.ReactNode;
+    config?: TailwindConfig;
+}
+declare const Tailwind: React.FC<TailwindProps>;
+
+export { Tailwind, TailwindConfig, TailwindProps };

package/dist/index.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { Config } from 'tailwindcss';
+
+type TailwindConfig = Omit<Config, "content">;
+interface TailwindProps {
+    children: React.ReactNode;
+    config?: TailwindConfig;
+}
+declare const Tailwind: React.FC<TailwindProps>;
+
+export { Tailwind, TailwindConfig, TailwindProps };

package/dist/index.js

@@ -0,0 +1,257 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  Tailwind: () => Tailwind
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/tailwind.tsx
+var React = __toESM(require("react"));
+var import_server = require("react-dom/server");
+
+// src/utils/css-to-jsx-style.ts
+var camelCase = (string) => string.replace(/-(\w|$)/g, (_, p1) => p1.toUpperCase());
+var convertPropertyName = (prop) => {
+  let modifiedProp = prop;
+  modifiedProp = modifiedProp.toLowerCase();
+  if (modifiedProp === "float") {
+    return "cssFloat";
+  }
+  if (modifiedProp.startsWith("--")) {
+    return modifiedProp;
+  }
+  if (modifiedProp.startsWith("-ms-")) {
+    modifiedProp = modifiedProp.slice(1);
+  }
+  return camelCase(modifiedProp);
+};
+var cssToJsxStyle = (cssText) => {
+  const style = {};
+  const declarations = cssText.matchAll(
+    /([a-zA-Z0-9\-_]+)\s*:\s*('[^']*'[^;]*|"[^"]*"[^;]*|.*?\([^)]*\)[^;]*|[^;]*);?/gm
+  );
+  for (const [_declaration, property, value] of declarations) {
+    if (property.length > 0 && value.trim().length > 0) {
+      style[convertPropertyName(property)] = value.trim();
+    }
+  }
+  return style;
+};
+
+// src/utils/get-css-for-markup.ts
+var import_postcss = __toESM(require("postcss"));
+var import_tailwindcss = __toESM(require("tailwindcss"));
+var import_postcss_css_variables = __toESM(require("postcss-css-variables"));
+global.__OXIDE__ = void 0;
+var getCssForMarkup = (markup, config) => {
+  const corePlugins = config == null ? void 0 : config.corePlugins;
+  const tailwindConfig = __spreadProps(__spreadValues({}, config), {
+    corePlugins: __spreadValues({
+      preflight: false
+    }, corePlugins)
+  });
+  const processor = (0, import_postcss.default)([
+    (0, import_tailwindcss.default)(__spreadProps(__spreadValues({}, tailwindConfig), {
+      content: [{ raw: markup, extension: "html" }]
+    })),
+    (0, import_postcss_css_variables.default)()
+  ]);
+  const result = processor.process(
+    String.raw`
+        @tailwind base;
+        @tailwind components;
+        @tailwind utilities;
+      `,
+    { from: void 0 }
+    // no need to use from since the `content` context is sent into tailwind
+  );
+  return result.css;
+};
+
+// src/utils/minify-css.ts
+var minifyCss = (css) => {
+  return css.replace(/\/\*[\s\S]*?\*\//gm, "").replace(/;\s+/gm, ";").replace(/:\s+/gm, ":").replace(/\)\s*{/gm, "){").replace(/\s+\(/gm, "(").replace(/{\s+/gm, "{").replace(/}\s+/gm, "}").replace(/\s*{/gm, "{").replace(/;?\s*}/gm, "}");
+};
+
+// src/utils/get-css-class-properties-map.ts
+var getStylesPerClassMap = (css) => {
+  const map = {};
+  for (const [_match, className, contents] of css.matchAll(
+    /\s*\.([\S]+)\s*{([^}]*)}/gm
+  )) {
+    map[className.trim()] = contents.replace(/^\n+/, "").replace(/\n+$/, "").trim();
+  }
+  return map;
+};
+
+// src/utils/escape-class-name.ts
+var escapeClassName = (className) => {
+  return className.replace(
+    /*      we need this look ahead capturing group to avoid using negative look behinds */
+    /([^\\]|^)(?=([^a-zA-Z0-9\-_]))/g,
+    (match, prefixCharacter, characterToEscape) => {
+      if (prefixCharacter === "" && characterToEscape === "\\")
+        return match;
+      return `${prefixCharacter}\\`;
+    }
+  );
+};
+
+// src/tailwind.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function processElement(element, nonMediaQueryTailwindStylesPerClass) {
+  let modifiedElement = element;
+  let resultingClassName = modifiedElement.props.className;
+  let resultingStyle = modifiedElement.props.style;
+  let resultingChildren = [];
+  if (modifiedElement.props.className) {
+    const fullClassName = modifiedElement.props.className;
+    const classNames = fullClassName.split(" ");
+    const classNamesToKeep = [];
+    const styles = [];
+    classNames.forEach((className) => {
+      const escapedClassName = escapeClassName(className);
+      if (typeof nonMediaQueryTailwindStylesPerClass[escapedClassName] === "undefined") {
+        classNamesToKeep.push(className);
+      } else {
+        styles.push(
+          `${nonMediaQueryTailwindStylesPerClass[escapedClassName]};`
+        );
+      }
+    });
+    resultingStyle = __spreadValues(__spreadValues({}, modifiedElement.props.style), cssToJsxStyle(styles.join(" ")));
+    resultingClassName = classNamesToKeep.length > 0 ? classNamesToKeep.join(" ") : void 0;
+  }
+  if (modifiedElement.props.children) {
+    resultingChildren = React.Children.toArray(
+      modifiedElement.props.children
+    ).map((child) => {
+      if (React.isValidElement(child)) {
+        return processElement(child, nonMediaQueryTailwindStylesPerClass);
+      }
+      return child;
+    });
+  }
+  modifiedElement = React.cloneElement(
+    modifiedElement,
+    __spreadValues(__spreadProps(__spreadValues({}, modifiedElement.props), {
+      className: resultingClassName
+    }), typeof resultingStyle === "undefined" ? {} : { style: resultingStyle }),
+    ...resultingChildren
+  );
+  if (typeof modifiedElement.type === "function") {
+    const component = modifiedElement.type;
+    const renderedComponent = component(modifiedElement.props);
+    if (React.isValidElement(renderedComponent)) {
+      modifiedElement = processElement(
+        renderedComponent,
+        nonMediaQueryTailwindStylesPerClass
+      );
+    }
+  }
+  return modifiedElement;
+}
+function processHead(headElement, responsiveStyles) {
+  const styleElement = /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { children: minifyCss(responsiveStyles.join("")) });
+  return React.cloneElement(
+    headElement,
+    headElement.props,
+    ...React.Children.toArray(headElement.props.children),
+    styleElement
+  );
+}
+var Tailwind = ({ children, config }) => {
+  let headStyles = [];
+  const markupWithTailwindClasses = (0, import_server.renderToStaticMarkup)(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children }));
+  const markupCSS = getCssForMarkup(markupWithTailwindClasses, config);
+  const nonMediaQueryCSS = markupCSS.replaceAll(
+    /@media\s*\(.*\)\s*{\s*\.(.*)\s*{[\s\S]*}\s*}/gm,
+    (mediaQuery, _className) => {
+      headStyles.push(
+        mediaQuery.replace(/[\r\n|\r|\n]+/g, "").replace(/\s+/g, " ").replaceAll(/\s*\.[\S]+\s*{([^}]*)}/gm, (match, content) => {
+          return match.replace(
+            content,
+            content.split(";").map(
+              (propertyDeclaration) => propertyDeclaration.endsWith("!important") ? propertyDeclaration.trim() : `${propertyDeclaration.trim()}!important`
+            ).join(";")
+          );
+        })
+      );
+      return "";
+    }
+  );
+  const nonMediaQueryTailwindStylesPerClass = getStylesPerClassMap(nonMediaQueryCSS);
+  const childrenArray = React.Children.toArray(children);
+  const validElementsWithIndexes = childrenArray.map((child, i) => [child, i]).filter(([child]) => React.isValidElement(child));
+  let headElementIndex = -1;
+  validElementsWithIndexes.forEach(([element, i]) => {
+    childrenArray[i] = processElement(
+      element,
+      nonMediaQueryTailwindStylesPerClass
+    );
+    if (element.type === "head" || typeof element.type === "function" && "name" in element.type && element.type.name === "Head") {
+      headElementIndex = i;
+    }
+  });
+  headStyles = headStyles.filter((style) => style.trim().length > 0);
+  if (headStyles.length > 0) {
+    if (headElementIndex === -1) {
+      throw new Error(
+        "Tailwind: To use responsive styles you must have a <head> element as a direct child of the Tailwind component."
+      );
+    }
+    const [headElement, headAllElementsIndex] = validElementsWithIndexes[headElementIndex];
+    childrenArray[headAllElementsIndex] = processHead(headElement, headStyles);
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: childrenArray });
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Tailwind
+});

package/dist/index.mjs

@@ -0,0 +1,223 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+
+// src/tailwind.tsx
+import * as React from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+
+// src/utils/css-to-jsx-style.ts
+var camelCase = (string) => string.replace(/-(\w|$)/g, (_, p1) => p1.toUpperCase());
+var convertPropertyName = (prop) => {
+  let modifiedProp = prop;
+  modifiedProp = modifiedProp.toLowerCase();
+  if (modifiedProp === "float") {
+    return "cssFloat";
+  }
+  if (modifiedProp.startsWith("--")) {
+    return modifiedProp;
+  }
+  if (modifiedProp.startsWith("-ms-")) {
+    modifiedProp = modifiedProp.slice(1);
+  }
+  return camelCase(modifiedProp);
+};
+var cssToJsxStyle = (cssText) => {
+  const style = {};
+  const declarations = cssText.matchAll(
+    /([a-zA-Z0-9\-_]+)\s*:\s*('[^']*'[^;]*|"[^"]*"[^;]*|.*?\([^)]*\)[^;]*|[^;]*);?/gm
+  );
+  for (const [_declaration, property, value] of declarations) {
+    if (property.length > 0 && value.trim().length > 0) {
+      style[convertPropertyName(property)] = value.trim();
+    }
+  }
+  return style;
+};
+
+// src/utils/get-css-for-markup.ts
+import postcss from "postcss";
+import tailwindcss from "tailwindcss";
+import postcssCssVariables from "postcss-css-variables";
+global.__OXIDE__ = void 0;
+var getCssForMarkup = (markup, config) => {
+  const corePlugins = config == null ? void 0 : config.corePlugins;
+  const tailwindConfig = __spreadProps(__spreadValues({}, config), {
+    corePlugins: __spreadValues({
+      preflight: false
+    }, corePlugins)
+  });
+  const processor = postcss([
+    tailwindcss(__spreadProps(__spreadValues({}, tailwindConfig), {
+      content: [{ raw: markup, extension: "html" }]
+    })),
+    postcssCssVariables()
+  ]);
+  const result = processor.process(
+    String.raw`
+        @tailwind base;
+        @tailwind components;
+        @tailwind utilities;
+      `,
+    { from: void 0 }
+    // no need to use from since the `content` context is sent into tailwind
+  );
+  return result.css;
+};
+
+// src/utils/minify-css.ts
+var minifyCss = (css) => {
+  return css.replace(/\/\*[\s\S]*?\*\//gm, "").replace(/;\s+/gm, ";").replace(/:\s+/gm, ":").replace(/\)\s*{/gm, "){").replace(/\s+\(/gm, "(").replace(/{\s+/gm, "{").replace(/}\s+/gm, "}").replace(/\s*{/gm, "{").replace(/;?\s*}/gm, "}");
+};
+
+// src/utils/get-css-class-properties-map.ts
+var getStylesPerClassMap = (css) => {
+  const map = {};
+  for (const [_match, className, contents] of css.matchAll(
+    /\s*\.([\S]+)\s*{([^}]*)}/gm
+  )) {
+    map[className.trim()] = contents.replace(/^\n+/, "").replace(/\n+$/, "").trim();
+  }
+  return map;
+};
+
+// src/utils/escape-class-name.ts
+var escapeClassName = (className) => {
+  return className.replace(
+    /*      we need this look ahead capturing group to avoid using negative look behinds */
+    /([^\\]|^)(?=([^a-zA-Z0-9\-_]))/g,
+    (match, prefixCharacter, characterToEscape) => {
+      if (prefixCharacter === "" && characterToEscape === "\\")
+        return match;
+      return `${prefixCharacter}\\`;
+    }
+  );
+};
+
+// src/tailwind.tsx
+import { Fragment, jsx } from "react/jsx-runtime";
+function processElement(element, nonMediaQueryTailwindStylesPerClass) {
+  let modifiedElement = element;
+  let resultingClassName = modifiedElement.props.className;
+  let resultingStyle = modifiedElement.props.style;
+  let resultingChildren = [];
+  if (modifiedElement.props.className) {
+    const fullClassName = modifiedElement.props.className;
+    const classNames = fullClassName.split(" ");
+    const classNamesToKeep = [];
+    const styles = [];
+    classNames.forEach((className) => {
+      const escapedClassName = escapeClassName(className);
+      if (typeof nonMediaQueryTailwindStylesPerClass[escapedClassName] === "undefined") {
+        classNamesToKeep.push(className);
+      } else {
+        styles.push(
+          `${nonMediaQueryTailwindStylesPerClass[escapedClassName]};`
+        );
+      }
+    });
+    resultingStyle = __spreadValues(__spreadValues({}, modifiedElement.props.style), cssToJsxStyle(styles.join(" ")));
+    resultingClassName = classNamesToKeep.length > 0 ? classNamesToKeep.join(" ") : void 0;
+  }
+  if (modifiedElement.props.children) {
+    resultingChildren = React.Children.toArray(
+      modifiedElement.props.children
+    ).map((child) => {
+      if (React.isValidElement(child)) {
+        return processElement(child, nonMediaQueryTailwindStylesPerClass);
+      }
+      return child;
+    });
+  }
+  modifiedElement = React.cloneElement(
+    modifiedElement,
+    __spreadValues(__spreadProps(__spreadValues({}, modifiedElement.props), {
+      className: resultingClassName
+    }), typeof resultingStyle === "undefined" ? {} : { style: resultingStyle }),
+    ...resultingChildren
+  );
+  if (typeof modifiedElement.type === "function") {
+    const component = modifiedElement.type;
+    const renderedComponent = component(modifiedElement.props);
+    if (React.isValidElement(renderedComponent)) {
+      modifiedElement = processElement(
+        renderedComponent,
+        nonMediaQueryTailwindStylesPerClass
+      );
+    }
+  }
+  return modifiedElement;
+}
+function processHead(headElement, responsiveStyles) {
+  const styleElement = /* @__PURE__ */ jsx("style", { children: minifyCss(responsiveStyles.join("")) });
+  return React.cloneElement(
+    headElement,
+    headElement.props,
+    ...React.Children.toArray(headElement.props.children),
+    styleElement
+  );
+}
+var Tailwind = ({ children, config }) => {
+  let headStyles = [];
+  const markupWithTailwindClasses = renderToStaticMarkup(/* @__PURE__ */ jsx(Fragment, { children }));
+  const markupCSS = getCssForMarkup(markupWithTailwindClasses, config);
+  const nonMediaQueryCSS = markupCSS.replaceAll(
+    /@media\s*\(.*\)\s*{\s*\.(.*)\s*{[\s\S]*}\s*}/gm,
+    (mediaQuery, _className) => {
+      headStyles.push(
+        mediaQuery.replace(/[\r\n|\r|\n]+/g, "").replace(/\s+/g, " ").replaceAll(/\s*\.[\S]+\s*{([^}]*)}/gm, (match, content) => {
+          return match.replace(
+            content,
+            content.split(";").map(
+              (propertyDeclaration) => propertyDeclaration.endsWith("!important") ? propertyDeclaration.trim() : `${propertyDeclaration.trim()}!important`
+            ).join(";")
+          );
+        })
+      );
+      return "";
+    }
+  );
+  const nonMediaQueryTailwindStylesPerClass = getStylesPerClassMap(nonMediaQueryCSS);
+  const childrenArray = React.Children.toArray(children);
+  const validElementsWithIndexes = childrenArray.map((child, i) => [child, i]).filter(([child]) => React.isValidElement(child));
+  let headElementIndex = -1;
+  validElementsWithIndexes.forEach(([element, i]) => {
+    childrenArray[i] = processElement(
+      element,
+      nonMediaQueryTailwindStylesPerClass
+    );
+    if (element.type === "head" || typeof element.type === "function" && "name" in element.type && element.type.name === "Head") {
+      headElementIndex = i;
+    }
+  });
+  headStyles = headStyles.filter((style) => style.trim().length > 0);
+  if (headStyles.length > 0) {
+    if (headElementIndex === -1) {
+      throw new Error(
+        "Tailwind: To use responsive styles you must have a <head> element as a direct child of the Tailwind component."
+      );
+    }
+    const [headElement, headAllElementsIndex] = validElementsWithIndexes[headElementIndex];
+    childrenArray[headAllElementsIndex] = processHead(headElement, headStyles);
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children: childrenArray });
+};
+export {
+  Tailwind
+};

package/license.md

@@ -0,0 +1,7 @@
+Copyright 2022 Bu Kinoshita and Zeno Rocha
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/package.json

@@ -0,0 +1,72 @@
+{
+  "name": "@react-email/tailwind",
+  "version": "0.0.13.canary.0",
+  "description": "A React component to wrap emails with Tailwind CSS",
+  "sideEffects": false,
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist/**"
+  ],
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.mjs"
+      },
+      "require": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      }
+    }
+  },
+  "license": "MIT",
+  "scripts": {
+    "build": "tsup src/index.ts --format esm,cjs --dts --external react",
+    "clean": "rm -rf dist",
+    "dev": "tsup src/index.ts --format esm,cjs --dts --external react --watch",
+    "lint": "eslint .",
+    "test:watch": "vitest",
+    "test": "vitest run"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/resendlabs/react-email.git",
+    "directory": "packages/tailwind"
+  },
+  "keywords": [
+    "react",
+    "email",
+    "tailwind"
+  ],
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "dependencies": {
+    "postcss": "8.4.31",
+    "postcss-css-variables": "0.19.0",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "tailwindcss": "3.3.2"
+  },
+  "peerDependencies": {
+    "react": "18.2.0"
+  },
+  "devDependencies": {
+    "@babel/core": "7.21.8",
+    "@babel/preset-react": "7.22.5",
+    "@react-email/head": "workspace:*",
+    "@react-email/hr": "workspace:*",
+    "@react-email/html": "workspace:*",
+    "@testing-library/react": "14.0.0",
+    "@types/postcss-css-variables": "0.18.2",
+    "eslint-config-custom": "workspace:*",
+    "eslint-plugin-regex": "1.10.0",
+    "tsconfig": "workspace:*",
+    "typescript": "5.1.6"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/readme.md

@@ -0,0 +1,72 @@
+![React Email Tailwind cover](https://react.email/static/covers/tailwind.png)
+
+<div align="center"><strong>@react-email/tailwind</strong></div>
+<div align="center">A React component to wrap emails with Tailwind CSS.</div>
+<br />
+<div align="center">
+<a href="https://react.email">Website</a> 
+<span> · </span>
+<a href="https://react.email">Documentation</a> 
+<span> · </span>
+<a href="https://react.email">Twitter</a>
+</div>
+
+## Install
+
+Install component from your command line.
+
+#### With yarn
+
+```sh
+yarn add @react-email/tailwind -E
+```
+
+#### With npm
+
+```sh
+npm install @react-email/tailwind -E
+```
+
+## Getting started
+
+Add the component around your email body content.
+
+```jsx
+import { Button } from "@react-email/button";
+import { Tailwind } from "@react-email/tailwind";
+
+const Email = () => {
+  return (
+    <Tailwind
+      config={{
+        theme: {
+          extend: {
+            colors: {
+              "custom-color": "#ff0000",
+            },
+          },
+        },
+      }}
+    >
+      <Button
+        href="https://example.com"
+        className="text-custom-color bg-white mx-auto"
+      >
+        Click me
+      </Button>
+    </Tailwind>
+  );
+};
+```
+
+## Support
+
+This component was tested using the most popular email clients.
+
+| <img src="https://react.email/static/icons/gmail.svg" width="48px" height="48px" alt="Gmail logo"> | <img src="https://react.email/static/icons/apple-mail.svg" width="48px" height="48px" alt="Apple Mail"> | <img src="https://react.email/static/icons/outlook.svg" width="48px" height="48px" alt="Outlook logo"> | <img src="https://react.email/static/icons/yahoo-mail.svg" width="48px" height="48px" alt="Yahoo! Mail logo"> | <img src="https://react.email/static/icons/hey.svg" width="48px" height="48px" alt="HEY logo"> | <img src="https://react.email/static/icons/superhuman.svg" width="48px" height="48px" alt="Superhuman logo"> |
+| -------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------ |
+| Gmail ✔                                                                                           | Apple Mail ✔                                                                                           | Outlook ✔                                                                                             | Yahoo! Mail ✔                                                                                                | HEY ✔                                                                                         | Superhuman ✔                                                                                                |
+
+## License
+
+MIT License