Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
muslnode 18–226 runs
build_error
glibcnode 18–226 runs
build_error
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
babel-plugin-twin
✓ // In babel.config.js
module.exports = {
plugins: [
"babel-plugin-twin",
"babel-plugin-macros",
],
};
✗ // Wrong: placing twin after macros
module.exports = {
plugins: [
"babel-plugin-macros",
"babel-plugin-twin",
],
};
Plugin must be listed before babel-plugin-macros in the plugins array.
exclude option
✓ // In babel.config.js with exclude
module.exports = {
plugins: [
["babel-plugin-twin", { exclude: [/node_modules/] }],
"babel-plugin-macros",
],
};
✗ // Wrong: comma between plugin and options
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.
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;`} />;
Debug
Known issues
gotchaPlugin must be placed before babel-plugin-macros in the plugins array.fixReorder plugins array so that 'babel-plugin-twin' comes before 'babel-plugin-macros'.
affects: all
deprecatedNo known deprecations in this version.
breakingNo breaking changes reported in recent versions.
Errors
Common errors & fixes
Error: Cannot find module 'babel-plugin-twin'
Plugin not installed or not in node_modules.
fixRun npm install -D babel-plugin-twin or yarn add -D babel-plugin-twin.
ReferenceError: tw is not defined
babel-plugin-twin not correctly configured in babel config.
fixEnsure babel-plugin-twin is added before babel-plugin-macros in plugins array.
babel-plugin-macros: Could not resolve macro 'twin.macro'
twin.macro not installed or not configured.
fixInstall twin.macro: npm install twin.macro. Also ensure babel-plugin-twin is before babel-plugin-macros.
Audit
Dependencies
babel-plugin-macrosrequiredRequired to be present and configured after babel-plugin-twin in babel plugins array for twin.macro to function