Tailwind Email Template API

Public

API Details

The Tailwind Email Template API accepts Tailwind HTML code as input and generates a responsive HTML email template that can be used across mobile and desktop email clients. The API will process the Tailwind markup and output plain CSS-based email-friendly HTML, optimizing the layout and styling for reliable email rendering.

Request Schema

{
  "type": "object",
  "required": [
    "tailwind_html"
  ],
  "properties": {
    "tailwind_html": {
      "type": "string",
      "description": "The Tailwind HTML code that will be converted to an email-friendly HTML template."
    }
  }
}

Response Schema

{
  "type": "object",
  "required": [
    "html_template"
  ],
  "properties": {
    "html_template": {
      "type": "string",
      "description": "The generated HTML email template, optimized for reliable email rendering."
    }
  }
}

API Metadata

442

Version

API Examples

Example Request

{
  "tailwind_html": "<div class='bg-gray-100 py-6 flex flex-col justify-center sm:py-12'>\n  <div class='relative py-3 sm:max-w-xl sm:mx-auto'>\n    <div class='absolute inset-0 bg-gradient-to-r from-cyan-400 to-light-blue-500 shadow-lg transform -skew-y-6 sm:skew-y-0 sm:-rotate-6 sm:rounded-3xl'>\n    </div>\n    <div class='relative px-4 py-10 bg-white shadow-lg sm:rounded-3xl sm:p-20'>\n      <div class='max-w-md mx-auto'>\n        <div>\n          <h1 class='text-2xl font-semibold'>Welcome Back</h1>\n        </div>\n        <div class='divide-y divide-gray-200'>\n          <div class='py-8 text-base leading-6 space-y-4 text-gray-700 sm:text-lg sm:leading-7'>\n            <p>An advanced online playground for Tailwind CSS, featuring instant preview, code formatting, and class sorting.</p>\n            <p>It's a project by Roel Schut.</p>\n          </div>\n          <div class='pt-6 text-base leading-6 font-bold sm:text-lg sm:leading-7'>\n            <p>Checkout the <a href='https://tailwindcss.com/' class='text-cyan-600 hover:text-cyan-700'>Tailwind CSS</a> documentation.</p>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>"
}

Example Response

{
  "html_template": "<table cellpadding='0' cellspacing='0' border='0' width='100%' style='border-collapse: collapse; border-spacing: 0;'>\n  <tr>\n    <td align='center' valign='top' style='background-color: #f1f5f9; padding: 24px;'>\n      <table cellpadding='0' cellspacing='0' border='0' width='600' style='border-collapse: collapse; border-spacing: 0;'>\n        <tr>\n          <td align='center' valign='top' style='background-color: #ffffff; border-radius: 12px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); padding: 40px;'>\n            <h1 style='font-size: 24px; font-weight: 600; color: #1f2937; margin-bottom: 16px;'>Welcome Back</h1>\n            <p style='font-size: 16px; line-height: 24px; color: #4b5563; margin-bottom: 24px;'>An advanced online playground for Tailwind CSS, featuring instant preview, code formatting, and class sorting.</p>\n            <p style='font-size: 16px; line-height: 24px; color: #4b5563; margin-bottom: 24px;'>It's a project by Roel Schut.</p>\n            <p style='font-size: 16px; font-weight: 600; color: #0891b2;'>Checkout the <a href='https://tailwindcss.com/' style='color: #0891b2; text-decoration: underline;'>Tailwind CSS</a> documentation.</p>\n          </td>\n        </tr>\n      </table>\n    </td>\n  </tr>\n</table>"
}