How to toggle class in CDN Version?

[chanayus]

Hello, My Project is vanilla static HTML, and I install Twind By CDN.
I want to toggle the "bg-red-500" class by clicking the button, but it's not working.

<button id="btn" class="bg-red-500">Button</button>

  const btn = document.querySelector("#btn")
  
  btn.addEventListener("click", () => {
      btn.classList.toggle("bg-red-500")
  })

and I have inspect elements with devtools, and I found the button classname is not the same in my code.

<button id="btn" class="#17tpr9i">Button</button>

Anyone who know how to toggle class? 🙏

[rschristian]

Twind hashes classnames by default. You can easily configure this however:

<script src="https://cdn.twind.style" crossorigin></script>
<script>
    twind.install({
        hash: false,
    });
</script>

This disables hashing, so bg-red-500 will stay bg-red-500.

[chanayus]

Thank you so much. 🙏