tw`bg-white` at use tw variable with template string it is not work!

I get an error: Argument of type 'TemplateStringsArray' is not assignable to parameter of type 'StringLike'. Type 'TemplateStringsArray' is not assignable to type 'string'.

[sastan]

@KyleJune You could use the style helper which provides a stitches like API. Docs are missing but here are the tests: https://github.com/tw-in-js/twind/blob/next/packages/twind/src/tests/style.test.ts#L61

import { style } from 'twind'

const navLinkStyle = style({
  label: 'NavLink', // optional
  // the classes to always use
  base: `px-3 py-2 rounded-md text-sm font-medium`,
  // only needed in cases there is no isActive in the props
  defaults: {
    isActive: false,
  },
  // define the props the navLinkStyle function accepts
  props: {
    isActive: {
      true: `bg-gray-900 text-white`,
      false:  `text-gray-300 hover:bg-gray-700 hover:text-white`,
    },
  },
})

// Usage
function Component({ item }) {
  return (<NavLink
    key={item.name}
    to={item.to}
    end
    className={navLinkStyle}
    // or explicit
    className={({ isActive }) => navLinkStyle({ isActive })}
  >
    {item.name}
  </NavLink>)

[sastan]

In v0.16, tw took a template string.

twind.dev/api/interfaces/twind.tw.html#callable

The documentation for v1 migration says the following. It makes it sound like we can use it the same as we were in v0.16.

tw as known from twind v0.16

twind.style/docs/migration

The readme on GitHub says the same.

https://github.com/tw-in-js/twind/blob/next/website/pages/docs/migration.md#notable-changes

You are right that’s a mistake in the docs.

It looks like the equivalent of v0.16 tw is tx.bind(tw). That’s not clear from the documentation. I found out about tx from the following reference page but it just says that it is shorthand for tw(cx(...args)). Coming from v0.16, it wasn’t clear what cx does, so I didn’t realize tx would get me the same behavior. I didn’t make the connection until reading your comment on this issue.

twind.style/docs/reference#utilities

I think it would help if migration docs were updated to reflect that tx is the equivalent of v0.16 tw and that v1 tw is different.

Yep. I must adjust this.

Any insight into why the call signature of tw was changed in V1?

The main reason is performance. Interpolating a template string array takes some time. By accepting only a string we can boost the performance for many cases (like transforming the class name attribute).