babel-plugin-twin

1.1.0 verified Sat Apr 25 auth: no javascript

Babel plugin to automatically add the tw prop from twin.macro and the css prop from CSS-in-JS libraries without explicit imports. Current stable version is 1.1.0. Updated irregularly as needed. Key differentiator: eliminates the need for `import 'twin.macro'` in every file, streamlining usage with twin.macro for Tailwind CSS in React.

Common errors

error Error: Cannot find module 'babel-plugin-twin' ↓

cause Plugin not installed or not in node_modules.

fix

Run npm install -D babel-plugin-twin or yarn add -D babel-plugin-twin.

error ReferenceError: tw is not defined ↓

cause babel-plugin-twin not correctly configured in babel config.

fix

Ensure babel-plugin-twin is added before babel-plugin-macros in plugins array.

error babel-plugin-macros: Could not resolve macro 'twin.macro' ↓

cause twin.macro not installed or not configured.

fix

Install twin.macro: npm install twin.macro. Also ensure babel-plugin-twin is before babel-plugin-macros.

Warnings

gotcha Plugin must be placed before babel-plugin-macros in the plugins array. ↓

fix Reorder plugins array so that 'babel-plugin-twin' comes before 'babel-plugin-macros'.

deprecated No known deprecations in this version.

breaking No breaking changes reported in recent versions.

Install

npm install babel-plugin-twin

yarn add babel-plugin-twin

pnpm add babel-plugin-twin

Imports

babel-plugin-twin

wrong

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

correct

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

Plugin must be listed before babel-plugin-macros in the plugins array.

exclude option

wrong

// Wrong: comma between plugin and options
module.exports = {
  plugins: [
    ["babel-plugin-twin", { exclude: [/node_modules/] }],
    "babel-plugin-macros",
  ],
};

correct

// In babel.config.js with exclude
module.exports = {
  plugins: [
    ["babel-plugin-twin", { exclude: [/node_modules/] }],
    "babel-plugin-macros",
  ],
};

Exclude is an array of regex patterns.

debug option

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

Debug prints feedback during transformation.

Quickstart

Installation and basic configuration to use tw and css props without imports.

// Install
// npm i -D babel-plugin-twin

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

// Now you can use tw prop without import
// Component.jsx
const Component = () => <div tw="block" />;

// Also css prop works via your CSS-in-JS library
const StyledDiv = () => <div css={`background-color: blue;`} />;