Variant does not work with latest twin.macro "^3.0.1"

[Anishali2]

I'm using tailwind css in my project with next js and typescript

my package json

"dependencies": {
"react": "18.2.0",
"tailwindcss": "^3.2.4",
"twin.macro": "^3.0.1",
},
"babelMacros": {
    "twin": {
      "preset": "styled-components"
    }
  }

I try every single example from internet and I don't find any help related to variant props in twin.macro component

The way I use

export const Horizonatlspace = tw.div`flex flex-row gap-16 text-secondary-dark`

Every single information on internet is just import { styled } from 'twin.macro' but on the latest version of twin.macro the styled component is unable to import in my project is shows this error

Module '"twin.macro"' has no exported member 'styled'. Did you mean to use 'import styled from "twin.macro"'

I need the solution of how we can use the variant property in twin.macro latest version

[ben-rogerson]

There's a types directory with twin.d.ts - have you added that to your project? That's where the additional imports are defined.

• Example
• TypeScript setup