#1113·snabbdom

Problem with Tailwind style complex class names?

Author: tslockeCreated Mar 5, 2024Updated Mar 20, 2024

I recently switched to using snabbdom to efficiently update the page preview in a web builder I'm working on.

The HTML contains Tailwind classes, e.g.class='block my-2 rounded bg-[#A31F24] text-white px-3 py-1'

I sometimes get an error from my call to patch(oldVnode, newVnode):

DOMException: Failed to execute 'createElement' on 'Document': The tag name provided ('a.block.my-2.rounded.bg-[') is not a valid name.

My patch function looks like this

import * as sd from "snabbdom"

const patch = sd.init([
  sd.classModule,
  sd.attributesModule,
  sd.datasetModule,
  sd.styleModule,
  sd.eventListenersModule,
])

Is this expected? Is there a workaround?

p.s. as a newbie, I'm not sure if I've got the right modules there -- all I want is "make this dom exactly like this other dom" (and the dom does include data attributes and style attributes, and does have event listeners on it)

Thanks!