saadeghi/daisyui · error · Error

Could not focus Tailwind Play's ${label} editor.${diagnostic

Error message

Could not focus Tailwind Play's ${label} editor.${diagnostics}

What it means

Thrown by setWithEditorUi when focusVisibleEditor never returned an ok result within the deadline for the given label. The diagnostics string, when present, embeds a JSON snapshot of up to 30 candidate editor DOM elements (tag, role, className, dimensions) to show what the focus logic saw.

Source

Thrown at packages/tailwind-play-share/index.mjs:778

  if (!pasteResult?.ok) {
    throw new Error(
      `Tailwind Play's editor did not accept the paste event: ${JSON.stringify(pasteResult)}`,
    )
  }
}

async function setWithEditorUi(client, html, css, timeoutMs) {
  for (const [label, source] of [
    ["HTML", html],
    ["CSS", css],
  ]) {
    await clickEditorTab(client, label)
    const focusResult = await focusVisibleEditor(client, label, timeoutMs)
    if (!focusResult?.ok) {
      const diagnostics = focusResult?.diagnostics?.length
        ? ` Editor DOM: ${JSON.stringify(focusResult.diagnostics)}`
        : ""
      throw new Error(`Could not focus Tailwind Play's ${label} editor.${diagnostics}`)
    }
    await replaceActiveEditor(client, source)
    await delay(150)
  }
}

function extractSharedUrl(value) {
  if (typeof value !== "string") return undefined
  const match = value.match(/https:\/\/play\.tailwindcss\.com\/[^\s"'<>]+/i)
  if (!match) return undefined

  try {
    const url = new URL(match[0])
    const hasShareIdentifier = url.pathname !== "/" || url.search !== "" || url.hash !== ""
    return url.hostname === "play.tailwindcss.com" && hasShareIdentifier ? url.href : undefined
  } catch {
    return undefined
  }

View on GitHub (pinned to 42b09e637e)

Solutions

Raise --timeout so the editor fully mounts before focus is attempted.
Update tailwind-play-share to pick up selector changes.
Inspect the diagnostics JSON in the error message to see which elements the page actually exposed.
Retry with --headed to observe the editor state visually.

Defensive patterns

Strategy: try-catch

Try / catch

try {
  url = await createTailwindPlay(inputs)
} catch (error) {
  if (/Could not focus Tailwind Play's .* editor/.test(error.message)) {
  // diagnostics JSON lists the candidate editor DOM elements seen
  }
  throw error
}

Prevention

Increase --timeout so the editor mounts fully before focus is attempted.
Update tailwind-play-share to track editor selector changes.
Read the embedded Editor DOM diagnostics JSON to see what the page exposed.

When it happens

Trigger: focusVisibleEditor's do/while loop exits with target.ok falsy because no focusable element scored above 0 and no clickable editor surface (>=40x40) was found before the deadline.

Common situations: Tailwind Play's editor mounting changed so none of the scored selectors (.monaco-editor textarea, .cm-content, .ace_text-input, [role=textbox], textarea, [contenteditable]) match, the editor panel is hidden, or the page never finished rendering the editor.

Related errors

AI-assisted analysis of saadeghi/daisyui@42b09e637e (2026-08-13). Data as JSON: /api/errors/aafa1a8b218c4c4d. Report an issue: GitHub.