Styled Component API

[tw-in-js]

Styled Component API

[mattrossman]

To use Tailwind within styled the apply helper can be used

I imagine tw would also work in this context? Just want to check since that's what I'm used to from twin.macro (and it's shorter to type)

[sastan]

To use Tailwind within styled the apply helper can be used

I imagine tw would also work in this context? Just want to check since that's what I'm used to from twin.macro (and it's shorter to type)

It could but I would advise to use apply. With tw each class is added to the className which may result in unwanted styling. By using apply all those styles are merged into one class (the twin.macro behavior) and that allows to use passed in classNames to always override component styles.

See this example from @gojutin https://codesandbox.io/s/twind-apply-react-typescript-73pm9?file=/src/components/Code.tsx:150-397

It could be written with this proposal as:

twind.code`text(base gray-600) bg-gray-200 p-1 rounded-md`

// Or using styled
styled.code`
  /* other styles */
  ${apply`text(base gray-600) bg-gray-200 p-1 rounded-md`}
`

[sastan]

Superseded by twind/style API