twin.macro: Property 'tw' does not exist on type

This is almost the same exact error as #33, except I’m using Next.js and Emotion.

All of a sudden, all of the tw props on my components are erroring in TypeScript with:

Type '{ children: Element[]; tw: string; }' is not assignable to type 'ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement> & { css?: Interpolation<Theme>; }'.
  Property 'tw' does not exist on type 'ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement> & { css?: Interpolation<Theme>; }'.

Using the tw template string inside a css prop works okay (i.e., css={ [ tw`text-xl` ] }), and the site is rendering totally fine (TypeScript is the only thing that’s complaining).

It was working for weeks, and only stopped yesterday. I updated a few packages yesterday, and something tailwind or emotion-related might have been included — would some version mismatch be causing an issue? Notably, I’m using a monorepo with this structure:

project/
  ├─ package.json
  ├─ tsconfig.json
  ├─ tailwind.config.js
  |
  └─ services/
      └─ app/
          ├─ package.json
          ├─ tsconfig.json
          ├─ babel-plugin-macros.config.js
          ├─ babel.config.js
          ├─ twin.d.ts
          |
          └─ src/pages/

The only thing tailwind-related in the root package.json is a a devDependency of "tailwindcss": "^2.1.0",.

The package.json in the app service contains (among other things):

 "dependencies": {
    "@emotion/css": "^11.1.3",
    "@emotion/react": "^11.1.5",
    "@emotion/server": "^11.0.0",
    "@emotion/styled": "^11.3.0",
    "next": "10.2.0",
    "next-transpile-modules": "^7.1.1",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "twin.macro": "^2.4.2"
  },
  "devDependencies": {
    "@babel/core": "^7.13.8",
    "@emotion/babel-plugin": "^11.3.0",
    "@emotion/babel-preset-css-prop": "^11.2.0",
    "babel-plugin-macros": "^3.1.0",
    "tailwindcss": "^2.1.0"
  }

My twin.d.ts looks like this:

import "twin.macro";
import styledImport from "@emotion/styled";
import { css as cssImport } from "@emotion/react";

declare module "twin.macro" {
  const styled: typeof styledImport;
  const css: typeof cssImport;
}

And my babel-plugin-macros.config.js looks like this:

module.exports = {
  twin: {
    preset: `emotion`,
    config: `../../tailwind.config.js`,
  },
};