Prefix All Tailwind UI classes

prefix.js

// Prefix all Tailwind UI classes with "tw-"
// Works as of 2020-04-25

// Examples:
// mx-4 -> tw-mx-4
// -mx-4 -> tw--mx-4
// lg:mx-4 -> lg:tw-mx-4
// lg:-mx-4 -> lg:tw--mx-4

const prefix = "tw-"
Array
  .from(document.querySelectorAll("code .token.attr-name"))
  .filter(el => el.textContent === "class")
  .map(el => el.nextElementSibling)
  .flatMap(el => [...el.childNodes])
  .filter(n => n.nodeType === 3)
  .map(n => (n.parentNode.dataset.value = n.parentNode.dataset.value || n.textContent, n))
  .forEach(n => {
    n.textContent = n.parentNode.dataset.value
      .split(/\s+/g)
      .map(c => c.replace(/^(?!.*:)|(:)/g, `$1${prefix}`))
      .join(" ")
  })