`tw(...)` vs `tw([...])` resulting different class

Please see this minimum example

import { tw } from "twind";

document.body.innerHTML = `
  <div class="${tw("bg-pink-50", "hover:text-pink-900", "p-3")}">
    Not array
  </div>

  <hr />

  <div class="${tw(["bg-pink-50", "hover:text-pink-900", "p-3"])}">
    Array
  </div>
`;

CodeSandbox

Screenshot

Everything behind hover: will be ignored when using tw(...)

[sastan]

@rockmandash I don’t know where i got this from… I think some tweetet it:

directives: {
   tw: {
     inserted(el, binding) {
       el.className = tw`${binding.value}`
     },
   },
 },

// ------

<div v-tw="'h-screen bg-purple-400 flex items-center justify-center'">Awesome twind</div>

Maybe this helps with your project.

[sastan]

It is now consistent with the array method:

tw('hover:bg-red-500', 'p-3')
tw(['hover:bg-red-500', 'p-3'])
// => hover:bg-red-500 p-3

If you want grouping to cross string boundaries you can use explicit grouping:

tw('hover:(', 'bg-red-500', 'p-3', ')', 'm-1')
// => hover:bg-red-500 hover:p-3 m-1

tw('hover:(bg-red-500', 'p-3)', 'm-1')
// => hover:bg-red-500 hover:p-3 m-1

tw({ hover: ['bg-red-500', 'p-3'] }, 'm-1')
// => hover:bg-red-500 hover:p-3 m-1