prettier-plugin-twin.macro

1.0.14 verified Sat Apr 25 auth: no javascript

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.

Common errors

error Error: Couldn't find tailwind.config.js ↓

cause Plugin needs tailwind config to determine class order; file is missing or not in parent directories.

fix

Create a tailwind.config.js in your project root or set twin.macroConfig in prettier.config.js to point to an existing config.

error TypeError: prettier-plugin-twin.macro is not a function ↓

cause Plugin was loaded incorrectly (e.g., as default import in ESM).

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.

error Error [ERR_MODULE_NOT_FOUND]: Cannot find package 'prettier-plugin-twin.macro' ↓

cause Plugin not installed or not listed in package.json dependencies.

fix

Run npm install --save-dev prettier-plugin-twin.macro prettier or yarn add -D prettier-plugin-twin.macro prettier.

Warnings

breaking Plugin may not work with Prettier v3+ due to plugin API changes; check compatibility. ↓

fix Downgrade Prettier to v2.x or wait for plugin update supporting v3.

deprecated Support for twin.macro v2 has been deprecated; upgrade to twin.macro v3 for full compatibility. ↓

fix Update twin.macro to v3 and adjust import paths if needed.

gotcha The plugin only sorts classes in tw="..." and twin.macro template literals; other Tailwind usages (e.g., clsx) are ignored. ↓

fix Use twin.macro's built-in tw prop or template literals for sorting.

gotcha Groupify feature converts multiple variant classes into nested bracket groups; verify formatting after large file changes. ↓

fix Review diff after formatting; can disable grouping via plugin options if undesired.

gotcha Requires tailwind.config.js to be present in project or specify twin.macroConfig option; otherwise sorting may fail silently. ↓

fix Ensure tailwind.config.js exists or set twin.macroConfig in Prettier config.

Install

npm install prettier-plugin-twin.macro

yarn add prettier-plugin-twin.macro

pnpm add prettier-plugin-twin.macro

Imports

default
wrong
```
Using `import` in ESM context without proper setup
```
correct
```
Add to prettier.config.js as `plugins: [require('prettier-plugin-twin.macro')]`
```
Designed as a CommonJS plugin for Prettier. In ESM projects, use `import` with `createRequire` or specify in .prettierrc.

options

wrong

Assuming it uses Prettier's built-in tailwind config detection for twin.macro

correct

Use `twin.macroConfig` in prettier.config.js to override tailwind config path

If twin.macro has a custom config path, specify it via `twin.macroConfig` option.

sortOrder

wrong

Relying on Prettier's own sort order without the plugin's specific class ordering

correct

Use `tailwindSortClasses` (default true) to enable/disable sorting

This plugin enforces Tailwind's recommended order; disable only if you use a different order.

Quickstart

Demonstrates installing the plugin, configuring prettier.config.js, and formatting a twin.macro tw attribute with Tailwind classes.

// Install the plugin and prettier as dev dependencies
// npm i --save-dev prettier-plugin-twin.macro prettier

// prettier.config.js
module.exports = {
  plugins: [require('prettier-plugin-twin.macro')],
  // optional: specify path to tailwind config
  // twin: { macroConfig: './tailwind.config.js' }
};

// Example file with twin.macro
import tw from 'twin.macro';

const Component = () => (
  <div tw="bg-red-500 hover:bg-red-700 p-4 flex justify-between">
    Hello
  </div>
);

// After formatting:
// <div tw="flex justify-between p-4 bg-red-500 hover:bg-red-700">
//   Hello
// </div>