Import Tailwind HTML

You can convert Tailwind HTML into Designful objects using convertTailwindHtml from @designful/tailwind-html-to-editor.

Steps

• Provide a Tailwind HTML snippet or full HTML document.
• (Optional) Extract custom theme tokens from a tailwind.config script.
• Call convertTailwindHtml and load the returned objects into the editor.

In-Editor HTML to Canvas

If you want a "paste HTML → click convert" flow inside the editor UI, use editor.addCustomCodeComponent. It wraps the Tailwind converter and inserts the objects into the canvas.

const result = editor.addCustomCodeComponent({
  x: 120,
  y: 120,
  width: 320,
  height: 200,
  html: htmlSnippet,
  name: 'HTML Snippet',
})

console.log(result.groupId, result.objectIds)

Notes:

• Objects are grouped by default. Set group: false to insert raw objects without grouping.
• Conversion warnings are logged to console.warn.

Example (Snippet)

import { convertTailwindHtml } from '@designful/tailwind-html-to-editor'

const html = '<div class="p-6 bg-blue-500 text-white">Hello</div>'
const result = convertTailwindHtml(html, {
  mode: 'snippet',
  width: 320,
  height: 200,
})

editor.loadData({ objects: result.objects })

Example (Document + Custom Theme)

import { JSDOM } from 'jsdom'
import { convertTailwindHtml, extractTailwindConfig } from '@designful/tailwind-html-to-editor'

const html = readFileSync('website.html', 'utf8')
const dom = new JSDOM(html)
const domParser = new dom.window.DOMParser()
const tailwindConfig = extractTailwindConfig(html, { allowUnsafeEval: true })

const result = convertTailwindHtml(html, {
  mode: 'document',
  domParser,
  width: 1280,
  height: 720,
  viewportWidth: 1280,
  viewportHeight: 720,
  tailwindConfig,
  structure: 'frames',
})

editor.loadData({ objects: result.objects })

Debug Rendering

npx tsx debug/render-tailwind.ts -i debug/case10/website.html -j debug/case10/output.json -p debug/case10/output.png

This will convert the HTML and render a PNG via @designful/editor-node.

Supported Features

• Flex + grid layout (basic row/column + grid-cols-* support).
• Spacing utilities (p-*, gap-*, space-*, w-*, h-*, max-w-*, min-h-screen).
• Text styles (size, weight, alignment, transform, line height, letter spacing).
• Tailwind color tokens (including custom colors from tailwind.config).
• Background images declared with style="background-image: url(...)".

Limitations

• Complex CSS effects (advanced gradients, filters, transitions) are ignored or approximated.
• Advanced layout features (auto-fit grid, flex wrapping) are approximated.
• Images are rendered without clipping for rounded corners.
• extractTailwindConfig uses Function evaluation; only use it on trusted HTML.