NormWind vs prettier-plugin-tailwindcss in 2026
NormWind and prettier-plugin-tailwindcss compared on what each does, what each costs, how each is set up and what to check before you pick one.
SayDeploy is published by LunarWerx, which makes some of the tools compared here.
prettier-plugin-tailwindcss is a Prettier plugin that sorts Tailwind classes into a recommended order [1]. NormWind finds Tailwind class pairs like px-4 py-4 that can be written as one shorthand like p-4 [2].
| Option | Price | Install | Tailwind version |
|---|---|---|---|
| prettier-plugin-tailwindcss | Not published | Not published | Tailwind CSS v3.0+ [1]; v4 needs the CSS file entry point specified [1] |
| NormWind | Free with no paid tier [2] | npm dev dependency, or npx [2] | Tailwind CSS v4 projects [2] |
The short answer
prettier-plugin-tailwindcss is a Prettier plugin that automatically sorts Tailwind classes according to its recommended class order [1]. NormWind finds Tailwind class pairs like px-4 py-4 that can be written as one shorthand like p-4 [2].
By default, the plugin's page covers sorting classes in class attributes, framework-specific equivalents and Tailwind @apply directives [1]. It also describes a sorter entry point for using its sorting logic outside Prettier [1]. NormWind's sources cover shorthand findings [2], arbitrary values that match a named utility [2], automatic fixes [2] and a GitHub Action that annotates pull requests [2].
What prettier-plugin-tailwindcss is built for
Its own 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].
By default it sorts classes in the class attribute, framework-specific equivalents like className, :class and [ngClass], and Tailwind @apply directives [1]. The tailwindAttributes option takes an array of extra attribute names to sort [1]. The tailwindFunctions option takes function names so classes in function calls are sorted [1], and it also enables sorting in tagged template literals [1].
For Tailwind CSS v4, the plugin requires the CSS file entry point to be specified [1]. If a local Tailwind configuration file cannot be found, the plugin falls back to the default Tailwind configuration [1].
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 [2]. It also flags arbitrary values like rounded-[24px] that match a named Tailwind utility like rounded-3xl, using Tailwind's own canonicalizeCandidates engine [2].
The --fix option rewrites findings in Vue, Svelte, Astro and HTML files, and --fixall also covers JS/TS/JSX/TSX files [2]. The --dry-run option shows which files a fix would change without writing to disk [2]. Before merging classes, it compares the generated CSS before and after, and skips the merge if they differ [2].
For CI, it prints output as text, JSON or SARIF 2.1.0 for GitHub code scanning [2]. It ships as a GitHub Action that annotates pull requests inline [2]. The --diff-base option reports only findings on lines changed since a git ref such as origin/main [2], and --baseline records current per-file finding counts so only new findings fail CI [2].
Pricing and fees
The sources given here for prettier-plugin-tailwindcss state no price, fee or plan, so its price is not published here.
NormWind is free with no paid tier [2]. It uses the MIT licence [2].
Setting it up and daily use
For prettier-plugin-tailwindcss, the sources here say it requires Prettier v3 [1]. For Tailwind CSS v4, the plugin requires the CSS file entry point to be specified [1]. Extra attributes and function names can be added through options [1] [1]. The sources here give no install command.
NormWind installs from npm as a dev dependency, or runs with npx [2]. It works with Tailwind CSS v4 projects, and its CI runs on Ubuntu, Windows and macOS [2].
Daily, you can preview a fix with --dry-run [2] and apply it with --fix or --fixall [2]. The audit exits 1 when it finds anything, so it can fail a CI job [2].
Things to check before you choose
Ask what you need the tool to do: put classes in a set order, or find classes that can be written in a shorter or named form. The plugin's page speaks of sorting classes [1], and NormWind's claims speak of shorthand and named utility findings [2].
Check your Tailwind version. The plugin's page names Tailwind CSS v3.0+ [1]. NormWind's claims name Tailwind CSS v4 projects [2].
Check your Prettier version, since the plugin requires Prettier v3 [1].
Check which file types you need fixed, because NormWind's --fix and --fixall cover different file types [2].
Check how each tool reports in CI. NormWind's sources list text, JSON and SARIF output [2]. For the plugin, the facts here do not cover CI reporting, so check its own pages.
How to choose
If you want classes sorted by a recommended order inside Prettier, the plugin's page says that is its purpose [1].
If you want classes sorted in function calls or tagged template literals, the plugin's page describes options for that [1] [1].
If you want to use the sorting logic outside Prettier, the plugin's page describes a sorter entry point [1].
If you want class pairs collapsed to a shorthand, NormWind's claims describe that [2].
If you want arbitrary values matched to named utilities, NormWind's claims describe that [2].
If you want pull request annotations or only new findings failing CI, NormWind's claims describe that [2] [2].
If you want a free tool, NormWind's claims say it is free with no paid tier [2]. The plugin's price is not published in the sources here.
Frequently asked questions
Is prettier-plugin-tailwindcss free?
The sources used for this page state no price, fee or plan for prettier-plugin-tailwindcss, so its price is not published here. Check its own pages for licence and cost details before relying on it. NormWind, by comparison, is free with no paid tier [2].
Is NormWind free and open source?
NormWind is free with no paid tier [2]. It uses the MIT licence [2]. The sources here state no other plan, so the only price they give is free [2].
How do you install NormWind and prettier-plugin-tailwindcss?
NormWind installs from npm as a dev dependency, or runs with npx [2]. For prettier-plugin-tailwindcss, the sources here give no install command. They say it requires Prettier v3 and is ESM-only as of v0.5.x [1].
Does prettier-plugin-tailwindcss work with Tailwind CSS v4 [[f:prettier-plugin-tailwindcss-ca243f51]]?
Its page says that when using Tailwind CSS v4 you must specify your CSS file entry point [1]. NormWind's claims say it works with Tailwind CSS v4 projects [2]. The plugin's page also names Tailwind CSS v3.0+ [1].
Can NormWind fix Tailwind classes automatically?
The --fix option rewrites findings in Vue, Svelte, Astro and HTML files, and --fixall also covers JS/TS/JSX/TSX files [2]. The --dry-run option shows which files a fix would change without writing to disk [2]. Before merging classes, it compares generated CSS and skips the merge if they differ [2].
NormWind is free with no paid tier. [2]
Try NormWindSources
Related comparisons
- Best Tailwind CSS linters in 2026
- Best Tailwind CSS linters for CI maintainers in 2026
- Best Tailwind CSS linters for component library authors in 2026
- Best Tailwind CSS linters for Tailwind CSS developers in 2026
- eslint-plugin-tailwindcss alternatives in 2026
- eslint-plugin-tailwindcss vs prettier-plugin-tailwindcss in 2026
- eslint-plugin-tailwindcss vs Stylelint in 2026
- eslint-plugin-tailwindcss vs tailwind-merge in 2026
- NormWind vs eslint-plugin-tailwindcss in 2026
- NormWind vs Stylelint in 2026: Features and Costs