prettier-plugin-tailwind-align weekly downloads statistics

prettier-plugin-tailwind-align

One Prettier plugin. Two formatters. Zero conflicts.

Sorts Tailwind CSS utility classes and vertically aligns object properties — in a single pass.

Table of Contents

• Why this exists • Installation • Quick start • Options • What gets aligned • Full example • Migrating from two separate plugins • Local development • Compatibility • License

Why this exists

Prettier only allows one plugin to own a given parser hook (e.g. parsers["typescript"]). When prettier-plugin-tailwindcss and @huggingface/prettier-plugin-vertical-align are both listed in "plugins", whichever comes last silently wins the hook — breaking the other one with no error or warning.

The common workaround is a two-pass setup: run Tailwind sorting in one Prettier pass, alignment in another. This is fragile, slow, and ties your CI to a specific script order.

prettier-plugin-tailwind-align eliminates the problem entirely. It composes both behaviours internally so Prettier sees exactly one plugin, runs one pass, and both Tailwind class sorting and object alignment happen in the correct order — guaranteed.

Installation

Peer dependencies — prettier and prettier-plugin-tailwindcss must be installed separately (they are not bundled).

Quick start

Add the plugin to your .prettierrc (or prettier.config.js / prettier.config.ts):

That's it. Remove any separate prettier-plugin-tailwindcss or @huggingface/prettier-plugin-vertical-align entries — this plugin replaces both.

Options

All options from prettier-plugin-tailwindcss are fully supported and passed through unchanged — tailwindConfig, tailwindStylesheet, tailwindFunctions, tailwindAttributes, and so on.

In addition, this plugin adds the following options:

Complete .prettierrc example

Option Reference

| Option | Type | Default | Description |

| alignInGroups | "never" | "always" | "never" | Alignment scope inside object blocks | | tailwindAlignAttributes | string[] | [] | Extra JSX attribute names to treat as class strings | | tailwindAlignFunctions | string[] | [] | Extra function names whose arguments are class strings | | tailwindAlignWidth | number | 0 | Column width before wrapping; 0 = inherit printWidth | | tailwindAlignGroups | boolean | false | Group classes by Tailwind category (reserved, future feature) | | tailwindAlignMinLength | number | 0 | Min class string length to trigger formatting; 0 = always | | tailwindAlignObjectValues | boolean | true | Vertically align values in object class maps |

alignInGroups

Controls how alignment groups are computed inside object literals, interfaces, type literals, and class bodies.

| Value | Default | Description |

| "never" | ✅ | Every alignable property in the same block shares one alignment column. | | "always" | | A blank line starts a new independent group. Each group aligns to its own column. |

"never" — whole-block alignment

All properties align to the longest key in the entire block.

"always" — group-level alignment

A blank line starts a new independent alignment group.

tailwindAlignAttributes

string[] · default: []

Extra JSX attribute names (beyond the built-in list) that the plugin should treat as Tailwind class strings.

Built-in list already includes: className, class, wrapperClass, containerClass, buttonClass, labelClass, inputClass, and 20+ more common names.

tailwindAlignFunctions

string[] · default: []

Extra function names (beyond the built-in list) whose string arguments are treated as Tailwind class strings.

Built-in list: cn, cx, clsx, classnames, classNames, twMerge, twJoin, cva.

tailwindAlignWidth

number · default: 0

Maximum column width before class strings are wrapped. 0 means inherit Prettier's own printWidth setting.

tailwindAlignGroups

boolean · default: false

When true, classes will be grouped by Tailwind category (layout, visual, state, …) before rendering. Reserved for a future feature — currently has no effect.

tailwindAlignMinLength

number · default: 0

Minimum character length of a class string before formatting is applied. Strings shorter than this value are left unchanged. 0 (default) means always format regardless of length.

Useful to leave short utility strings like "flex" or "hidden" alone:

tailwindAlignObjectValues

boolean · default: true

When true (the default), values in object class maps are vertically aligned. Set to false to disable alignment while keeping class-string formatting.

What gets aligned

| Node type | Aligned |

| Object literal properties — { key: value } | ✅ | | TypeScript interface members | ✅ | | TypeScript type literal members | ✅ | | Class property definitions | ✅ | | Shorthand properties — { x, y, z } | ❌ skipped | | Method shorthands — { foo() {} } | ❌ skipped | | Multi-line values (key and value on different lines) | ❌ skipped | | Multiple properties sharing the same line | ❌ skipped |

Full example

Input

Output — with alignInGroups: "always"

Migrating from two separate plugins

Before:

After:

Then uninstall the old plugins:

The alignInGroups option name is kept identical to @huggingface/prettier-plugin-vertical-align's option, so existing configs work without any value changes.

Local development

Compatibility

| | Version |

| prettier | ^3.0 | | prettier-plugin-tailwindcss | ^0.7 | | Node.js | >=18 |

License

MIT © Sudhir Gadpayle