using with emotion/css

[mh-alahdadian]

I believe that emotion/css is faster than it's react and styled version because styles creation are outside of component render body
so is there a way to use twin with emotion css and without installing emotion/react package?

[ben-rogerson]

I haven't used this technique, but don't see why it wouldn’t work with twin - give this a try:

import tw from "twin.macro";
import { css } from '@emotion/css'

;<div
    className={css([
     tw`bg-black`
    ])}
  >
    This has a black background.
  </div>

You can also get twin to provide the css import with a config like this:

"twin": {
      "preset": "emotion",
      "css": {
        "import": "css",
        "from": "@emotion/css"
      }
    }

then:

import tw, { css } from "twin.macro";

[mh-alahdadian]

thanks for your answer
Is there a way that tw returns className instead of object ? I mean that tw() runs css(tw()) under the hood ?

[ben-rogerson]

No worries. Twin can convert the tailwind class into a css object but can't create any classNames.