Monkey-patch Tailwind CSS to also support attributes (outside of classes)

evil-tailwind.html

<script>
  const original_querySelectorAll = document.querySelectorAll;
  document.querySelectorAll = function () {
    if (arguments?.[0] == "[class]" && (new Error().stack).split("\n").filter(e=>e!="Error")?.[1]?.includes?.("tailwindcss/browser"))
      return [...original_querySelectorAll.apply(document,["*"])].map(e=>({classList:[...e.classList,...[...e.attributes].map(x=>x.name.replace(/⁄/g,'/'))]}));
    return original_querySelectorAll.apply(document,arguments);
  }
  const original_push = Array.prototype.push;
  Array.prototype.push = function () {
    if ((s=(new Error().stack).split("\n").filter(e=>e!="Error")?.[1],s)?.includes?.("enter")
       && s.includes("tailwindcss/browser")
       && arguments?.[0]?.length == 3
       && arguments?.[0]?.[0]?.[0] == ".")
      arguments[0][0] = `${arguments[0][0]},[${arguments[0][0].slice(1).replace(/\//g,'⁄')}]`;
    return original_push.apply(this,arguments);
  }
  const original_observe = MutationObserver.prototype.observe;
  MutationObserver.prototype.observe = function () {
    if ((new Error().stack).split("\n").filter(e=>e!="Error")?.[1]?.includes?.("tailwindcss/browser")
       && arguments?.[1]?.attributeFilter?.[0] == "class")
        arguments[1].attributeFilter = undefined;
    return original_observe.apply(this,arguments);
  }
</script>
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<p class="text-blue-500">I am styled using a class</p>
<p text-green-500>I am styled using an attribute</p>
<p text-red-500⁄75>The catch is that you have to use ⁄ instead of / in attributes</p>

added firefox support