{"id":20450,"library":"prettier-plugin-twin.macro","title":"prettier-plugin-twin.macro","description":"A Prettier plugin that sorts and formats Tailwind CSS classes within twin.macro template literals and JSX tw attributes. Current stable version is 1.0.14. It follows Tailwind's recommended class order and supports grouping by variant, bracket groups with !important, and arbitrary CSS. Released under the MIT license with a focus on twin.macro integration, unlike general Tailwind Prettier plugins. The plugin is actively maintained with frequent releases addressing regex improvements and bug fixes.","status":"active","version":"1.0.14","language":"javascript","source_language":"en","source_url":"ssh://git@github.com/mohammadsiyou/prettier-plugin-twin.macro","tags":["javascript","prettier","tailwindcss","twin.macro"],"install":[{"cmd":"npm install prettier-plugin-twin.macro","lang":"bash","label":"npm"},{"cmd":"yarn add prettier-plugin-twin.macro","lang":"bash","label":"yarn"},{"cmd":"pnpm add prettier-plugin-twin.macro","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency required for Prettier plugin functionality","package":"prettier","optional":false},{"reason":"peer dependency to read tailwind.config.js and apply sorting rules","package":"tailwindcss","optional":false}],"imports":[{"note":"Designed as a CommonJS plugin for Prettier. In ESM projects, use `import` with `createRequire` or specify in .prettierrc.","wrong":"Using `import` in ESM context without proper setup","symbol":"default","correct":"Add to prettier.config.js as `plugins: [require('prettier-plugin-twin.macro')]`"},{"note":"If twin.macro has a custom config path, specify it via `twin.macroConfig` option.","wrong":"Assuming it uses Prettier's built-in tailwind config detection for twin.macro","symbol":"options","correct":"Use `twin.macroConfig` in prettier.config.js to override tailwind config path"},{"note":"This plugin enforces Tailwind's recommended order; disable only if you use a different order.","wrong":"Relying on Prettier's own sort order without the plugin's specific class ordering","symbol":"sortOrder","correct":"Use `tailwindSortClasses` (default true) to enable/disable sorting"}],"quickstart":{"code":"// Install the plugin and prettier as dev dependencies\n// npm i --save-dev prettier-plugin-twin.macro prettier\n\n// prettier.config.js\nmodule.exports = {\n  plugins: [require('prettier-plugin-twin.macro')],\n  // optional: specify path to tailwind config\n  // twin: { macroConfig: './tailwind.config.js' }\n};\n\n// Example file with twin.macro\nimport tw from 'twin.macro';\n\nconst Component = () => (\n  <div tw=\"bg-red-500 hover:bg-red-700 p-4 flex justify-between\">\n    Hello\n  </div>\n);\n\n// After formatting:\n// <div tw=\"flex justify-between p-4 bg-red-500 hover:bg-red-700\">\n//   Hello\n// </div>\n","lang":"javascript","description":"Demonstrates installing the plugin, configuring prettier.config.js, and formatting a twin.macro tw attribute with Tailwind classes."},"warnings":[{"fix":"Downgrade Prettier to v2.x or wait for plugin update supporting v3.","message":"Plugin may not work with Prettier v3+ due to plugin API changes; check compatibility.","severity":"breaking","affected_versions":">=3.0.0"},{"fix":"Update twin.macro to v3 and adjust import paths if needed.","message":"Support for twin.macro v2 has been deprecated; upgrade to twin.macro v3 for full compatibility.","severity":"deprecated","affected_versions":">=1.0.0"},{"fix":"Use twin.macro's built-in tw prop or template literals for sorting.","message":"The plugin only sorts classes in tw=\"...\" and twin.macro template literals; other Tailwind usages (e.g., clsx) are ignored.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Review diff after formatting; can disable grouping via plugin options if undesired.","message":"Groupify feature converts multiple variant classes into nested bracket groups; verify formatting after large file changes.","severity":"gotcha","affected_versions":">=1.0.10"},{"fix":"Ensure tailwind.config.js exists or set twin.macroConfig in Prettier config.","message":"Requires tailwind.config.js to be present in project or specify twin.macroConfig option; otherwise sorting may fail silently.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Create a tailwind.config.js in your project root or set `twin.macroConfig` in prettier.config.js to point to an existing config.","cause":"Plugin needs tailwind config to determine class order; file is missing or not in parent directories.","error":"Error: Couldn't find tailwind.config.js"},{"fix":"Use `require('prettier-plugin-twin.macro')` in CommonJS, or use `import pkg from 'prettier-plugin-twin.macro'; const plugin = pkg.default || pkg;` in ESM.","cause":"Plugin was loaded incorrectly (e.g., as default import in ESM).","error":"TypeError: prettier-plugin-twin.macro is not a function"},{"fix":"Run `npm install --save-dev prettier-plugin-twin.macro prettier` or `yarn add -D prettier-plugin-twin.macro prettier`.","cause":"Plugin not installed or not listed in package.json dependencies.","error":"Error [ERR_MODULE_NOT_FOUND]: Cannot find package 'prettier-plugin-twin.macro'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}