This plugin automatically adds the tw prop from twin.macro - no import required:

- import "twin.macro"

const Component = () => <div tw="block" />

You’ll also get the css prop from your css-in-js library:

const Component = () => <div css={`background-color: blue;`} />

npm i -D babel-plugin-twin
# or
yarn add babel-plugin-twin -D

Then add the plugin to your babel config:

module.exports = {
  plugins: [
    "babel-plugin-twin",
    "babel-plugin-macros",
    // ...
  ],
};

Note: You must add "babel-plugin-twin" before "babel-plugin-macros" in the plugins array.

Add debug to your config to see some feedback:

module.exports = {
  plugins: [
    ["babel-plugin-twin", { debug: true }],
    "babel-plugin-macros",
    // ...
  ],
};

To avoid checking files or folders, supply exclude with an array of regex patterns:

module.exports = {
  plugins: [
    ["babel-plugin-twin", {
      "exclude": [
        "temp/",
        "..."
      ]
    },
    "babel-plugin-macros",
    // ...
  ],
};

A big shoutout goes to @euvs for the plugin concept + code and @mxsbr for planting the idea.