prettier-plugin-tailwindcss vs tailwind-merge in 2026

prettier-plugin-tailwindcss and tailwind-merge compared on what each does, price, setup and what to check, with NormWind as a third option.

By SayDeploy · 2026-10-24

SayDeploy is published by LunarWerx, which makes some of the tools compared here.

prettier-plugin-tailwindcss puts Tailwind classes in a recommended order inside Prettier ^[1]. tailwind-merge merges Tailwind classes in JS without style conflicts ^[2]. NormWind audits class pairs that can be shortened ^[3].

Option	Price	Tailwind version named	Install
prettier-plugin-tailwindcss	Not published	Tailwind CSS v3.0+ ^[1]; v4 needs your CSS entry point specified ^[1]	Not published
tailwind-merge	Not published	Tailwind v4.0 up to v4.3 ^[2]	Not published
NormWind	Free with no paid tier ^[3]	Tailwind CSS v4 projects ^[3]	npm dev dependency, or npx ^[3]

The short answer

prettier-plugin-tailwindcss is a Prettier plugin that automatically sorts Tailwind classes based on a recommended class order ^[1]. tailwind-merge is a utility function that merges Tailwind CSS classes in JS without style conflicts ^[2].

The plugin's page also covers putting classes in a recommended order ^[1] and sorting classes in tagged template literals ^[1]. tailwind-merge's page covers merging Tailwind CSS classes without style conflicts ^[2]. NormWind's sources cover finding class pairs that can be written as one shorthand ^[3].

What prettier-plugin-tailwindcss and tailwind-merge are built for

prettier-plugin-tailwindcss. Its page calls it a Prettier v3+ plugin for Tailwind CSS v3.0+ that automatically sorts classes based on its recommended class order ^[1]. As of v0.5.x it requires Prettier v3 and is ESM-only ^[1]. It also sorts classes in tagged template literals ^[1]. If no local configuration file is found, it falls back to the default Tailwind configuration ^[1].

tailwind-merge. Its page describes it as a utility function to efficiently merge Tailwind CSS classes in JS without style conflicts ^[2], and its short line is merging Tailwind CSS classes without style conflicts ^[2]. It works in all modern browsers and maintained Node versions ^[2].

What NormWind is built for

NormWind is made by the team that publishes this site.

It finds Tailwind class pairs like px-4 py-4 that can be written as one shorthand like p-4 ^[3]. It also flags arbitrary values like rounded-[24px] that match a named Tailwind utility like rounded-3xl, using Tailwind's own canonicalizeCandidates engine ^[3].

The --fix option rewrites findings in Vue, Svelte, Astro and HTML files, and --fixall also covers JS/TS/JSX/TSX files ^[3]. The --dry-run option shows which files a fix would change without writing to disk ^[3]. Before merging classes it compares the generated CSS before and after, and skips the merge if they differ ^[3].

For CI, it ships as a GitHub Action that annotates pull requests inline ^[3]. It prints output as text, JSON or SARIF 2.1.0 for GitHub code scanning ^[3]. The --diff-base option reports only findings on lines changed since a git ref such as origin/main ^[3], and --baseline records current per-file finding counts so only new findings fail CI ^[3].

Pricing and fees

The sources given here do not state a price for prettier-plugin-tailwindcss, so its price is not published here. The same is true for tailwind-merge: no price is stated in its sources, so it is not published here. Check each project's own pages and licence before you rely on either.

NormWind is free with no paid tier ^[3]. It uses the MIT licence ^[3].

Setting it up and daily use

For prettier-plugin-tailwindcss, the page says that as of v0.5.x it requires Prettier v3 and is ESM-only ^[1]. For Tailwind CSS v4+ its sorting logic takes a stylesheet path that points to the CSS stylesheet, resolved relative to a base directory ^[1]. Its filepath option makes Tailwind CSS resolve relative to that path ^[1]. The sources here give no install command for it.

For tailwind-merge, the sources here say it is a function used in JS ^[2] and say nothing about install steps or daily use beyond that.

NormWind installs from npm as a dev dependency, or runs with npx ^[3]. It works with Tailwind CSS v4 projects, and CI runs on Ubuntu, Windows and macOS ^[3]. The audit exits 1 when it finds anything, so it can fail a CI job ^[3].

Things to check before you choose

Ask which job you need done: ordering classes when Prettier formats a file, merging classes in JS code, or auditing classes for shorter forms. The sources describe these as different jobs ^[1] ^[2] ^[3].

Check your Prettier version, since the plugin page says it requires Prettier v3 as of v0.5.x ^[1]. Check your Tailwind version against each tool's own pages, and note that NormWind's claims name Tailwind CSS v4 projects ^[3].

Check where classes live in your code. The plugin sorts classes in tagged template literals ^[1]. Check each tool's own pages for anything these sources do not cover.

How to choose

If you want classes put in a recommended order whenever Prettier runs, the plugin's page describes that ^[1].

If you want to merge Tailwind classes in JS without style conflicts, tailwind-merge's page describes that ^[2].

If you want to find class pairs that can be one shorthand, NormWind's claims describe that ^[3].

If you want pull request annotations or a CI check that fails only on new findings, NormWind's claims describe that ^[3] ^[3].

If you want a free tool with no paid tier, NormWind's claims say that ^[3].

Frequently asked questions

What does prettier-plugin-tailwindcss do?

It is a Prettier v3+ plugin for Tailwind CSS v3.0+ that automatically sorts classes based on its recommended class order ^[1]. As of v0.5.x it requires Prettier v3 and is ESM-only ^[1]. It also sorts classes in tagged template literals ^[1].

What does tailwind-merge do?

Its page describes it as a utility function to efficiently merge Tailwind CSS classes in JS without style conflicts ^[2], and its short line is merging Tailwind CSS classes without style conflicts ^[2]. It works in all modern browsers and maintained Node versions ^[2].

Do developers need both prettier-plugin-tailwindcss and tailwind-merge?

The sources describe two different jobs. The plugin sorts classes into a recommended order inside Prettier ^[1], while tailwind-merge merges classes in JS without style conflicts ^[2]. Whether you need one, both or neither depends on your code, so check each tool's own pages against your project.

How does NormWind differ from these two?

NormWind finds Tailwind class pairs like px-4 py-4 that can be written as one shorthand like p-4 ^[3]. It flags arbitrary values that match a named utility ^[3]. It can fail a CI job by exiting 1 when it finds anything ^[3]. It is free with no paid tier ^[3].

Are prettier-plugin-tailwindcss and tailwind-merge free?

The sources given here do not state a price for either one, so their prices are not published here. Check each project's own pages and licence terms before you rely on them. For comparison, NormWind is free with no paid tier ^[3] and uses the MIT licence ^[3].

NormWind is free with no paid tier. ^[3]

Try NormWind