---
{"title": "NormWind vs prettier-plugin-tailwindcss in 2026", "description": "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.", "url": "https://saydeploy.com/normwind-vs-prettier-plugin-tailwindcss/", "date": "2026-10-23"}
---
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.

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] - [Visit NormWind](/go/normwind-vs-prettier-plugin-tailwindcss)

## Sources

[^1]: prettier-plugin-tailwindcss, github.com/tailwindlabs/prettier-plugin-tailwindcss, read 2026-10-07 (https://github.com/tailwindlabs/prettier-plugin-tailwindcss)
[^2]: NormWind's own description of itself (the product of this site's publisher) (/go/normwind-vs-prettier-plugin-tailwindcss)