{"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.","language":"javascript","status":"active","last_verified":"Sat Apr 25","install":{"commands":["npm install prettier-plugin-twin.macro"],"cli":null},"imports":["Add to prettier.config.js as `plugins: [require('prettier-plugin-twin.macro')]`","Use `twin.macroConfig` in prettier.config.js to override tailwind config path","Use `tailwindSortClasses` (default true) to enable/disable sorting"],"auth":{"required":false,"env_vars":[]},"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}