Registry / serialization / prettier-plugin-twin.macro

prettier-plugin-twin.macro

library1.0.14jsnpmunverified

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.

serialization

npm install prettier-plugin-twin.macro

github ↗package ↗

INSTALL

IMPORT

SIG · PRETTIER-PLUGIN-TW

prettier-plugin-twin.macro

serializationjavascriptv1.0.14

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

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

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

default

✓ Add to prettier.config.js as `plugins: [require('prettier-plugin-twin.macro')]`

✗ Using `import` in ESM context without proper setup

Designed as a CommonJS plugin for Prettier. In ESM projects, use `import` with `createRequire` or specify in .prettierrc.

options

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

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

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

sortOrder

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

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

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

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>

Debug

Known issues

breakingPlugin 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.

affects: >=3.0.0

deprecatedSupport 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.

affects: >=1.0.0

gotchaThe 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.

affects: >=1.0.0

gotchaGroupify 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.

affects: >=1.0.10

gotchaRequires 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.

affects: >=1.0.0

Errors

Common errors & fixes

Error: Couldn't find tailwind.config.js

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.

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

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 [ERR_MODULE_NOT_FOUND]: Cannot find package 'prettier-plugin-twin.macro'

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`.

Upgrade

Version history

1.0.14latest on npm

Audit

Dependencies

prettierrequiredpeer dependency required for Prettier plugin functionality

tailwindcssrequiredpeer dependency to read tailwind.config.js and apply sorting rules

Agent activity

6 hits · last 30 days

node

Resources

githubhttps://github.com/mohammadsiyou/prettier-plugin-twin.macro ↗

packagehttps://www.npmjs.com/package/prettier-plugin-twin.macro ↗