{"id":19235,"library":"babel-plugin-twin","title":"babel-plugin-twin","description":"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.","status":"active","version":"1.1.0","language":"javascript","source_language":"en","source_url":"https://github.com/ben-rogerson/babel-plugin-twin","tags":["javascript"],"install":[{"cmd":"npm install babel-plugin-twin","lang":"bash","label":"npm"},{"cmd":"yarn add babel-plugin-twin","lang":"bash","label":"yarn"},{"cmd":"pnpm add babel-plugin-twin","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required to be present and configured after babel-plugin-twin in babel plugins array for twin.macro to function","package":"babel-plugin-macros","optional":false}],"imports":[{"note":"Plugin must be listed before babel-plugin-macros in the plugins array.","wrong":"// Wrong: placing twin after macros\nmodule.exports = {\n  plugins: [\n    \"babel-plugin-macros\",\n    \"babel-plugin-twin\",\n  ],\n};","symbol":"babel-plugin-twin","correct":"// In babel.config.js\nmodule.exports = {\n  plugins: [\n    \"babel-plugin-twin\",\n    \"babel-plugin-macros\",\n  ],\n};"},{"note":"Exclude is an array of regex patterns.","wrong":"// Wrong: comma between plugin and options\nmodule.exports = {\n  plugins: [\n    [\"babel-plugin-twin\", { exclude: [/node_modules/] }],\n    \"babel-plugin-macros\",\n  ],\n};","symbol":"exclude option","correct":"// In babel.config.js with exclude\nmodule.exports = {\n  plugins: [\n    [\"babel-plugin-twin\", { exclude: [/node_modules/] }],\n    \"babel-plugin-macros\",\n  ],\n};"},{"note":"Debug prints feedback during transformation.","symbol":"debug option","correct":"// In babel.config.js with debug\nmodule.exports = {\n  plugins: [\n    [\"babel-plugin-twin\", { debug: true }],\n    \"babel-plugin-macros\",\n  ],\n};"}],"quickstart":{"code":"// Install\n// npm i -D babel-plugin-twin\n\n// babel.config.js\nmodule.exports = {\n  plugins: [\n    \"babel-plugin-twin\",\n    \"babel-plugin-macros\",\n  ],\n};\n\n// Now you can use tw prop without import\n// Component.jsx\nconst Component = () => <div tw=\"block\" />;\n\n// Also css prop works via your CSS-in-JS library\nconst StyledDiv = () => <div css={`background-color: blue;`} />;","lang":"javascript","description":"Installation and basic configuration to use tw and css props without imports."},"warnings":[{"fix":"Reorder plugins array so that 'babel-plugin-twin' comes before 'babel-plugin-macros'.","message":"Plugin must be placed before babel-plugin-macros in the plugins array.","severity":"gotcha","affected_versions":"all"},{"fix":"","message":"No known deprecations in this version.","severity":"deprecated","affected_versions":""},{"fix":"","message":"No breaking changes reported in recent versions.","severity":"breaking","affected_versions":""}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Run npm install -D babel-plugin-twin or yarn add -D babel-plugin-twin.","cause":"Plugin not installed or not in node_modules.","error":"Error: Cannot find module 'babel-plugin-twin'"},{"fix":"Ensure babel-plugin-twin is added before babel-plugin-macros in plugins array.","cause":"babel-plugin-twin not correctly configured in babel config.","error":"ReferenceError: tw is not defined"},{"fix":"Install twin.macro: npm install twin.macro. Also ensure babel-plugin-twin is before babel-plugin-macros.","cause":"twin.macro not installed or not configured.","error":"babel-plugin-macros: Could not resolve macro 'twin.macro'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}