---
{"title": "eslint-plugin-tailwindcss vs prettier-plugin-tailwindcss in 2026", "description": "eslint-plugin-tailwindcss and prettier-plugin-tailwindcss compared on purpose, install and setup, with NormWind as a third option for Tailwind audits.", "url": "https://saydeploy.com/eslint-plugin-tailwindcss-vs-prettier-plugin-tailwindcss/", "date": "2026-10-13"}
---
eslint-plugin-tailwindcss and prettier-plugin-tailwindcss compared on purpose, install and setup, with NormWind as a third option for Tailwind audits.

eslint-plugin-tailwindcss is an ESLint plugin for Tailwind CSS usage [^1]. prettier-plugin-tailwindcss automatically sorts classes in its recommended class order [^2].

| Option | Price | Install | Tailwind CSS version |
|---|---|---|---|
| eslint-plugin-tailwindcss | Free [^1] | npm i -D eslint-plugin-tailwindcss [^1] | Made for Tailwind CSS v4 [^1] |
| prettier-plugin-tailwindcss | Not published | Not published | Prettier plugin for Tailwind CSS v3.0+ [^2] |
| NormWind | Free with no paid tier [^3] | npm dev dependency, or npx [^3] | Tailwind CSS v4 projects [^3] |

## The short answer

eslint-plugin-tailwindcss is an ESLint plugin for Tailwind CSS usage [^1]. prettier-plugin-tailwindcss is a Prettier plugin that automatically sorts Tailwind classes based on its recommended class order [^2]. NormWind finds Tailwind class pairs like px-4 py-4 that can be written as one shorthand like p-4 [^3].

On needs, the ESLint plugin's page says it is made for Tailwind CSS v4 [^1] and that it can run linting inside a hosted repository's pipeline [^1]. The Prettier plugin's page says it sorts classes in class attributes, framework equivalents and @apply directives [^2]. NormWind's claims cover shorthand findings [^3] and CI report output as text, JSON or SARIF [^3].

## What eslint-plugin-tailwindcss, prettier-plugin-tailwindcss is built for

**eslint-plugin-tailwindcss.** Its page calls it an ESLint plugin for Tailwind CSS usage [^1]. It is made for Tailwind CSS v4 [^1], and the page says 9 rules are available with more on the way [^1]. It supports ESLint v10 [^1]. For Tailwind CSS v3 or older ESLint versions, the project provides eslint-plugin-tailwindcss@3.x.x [^1]. The page also says you can run the linting inside a pipeline of your hosted repository [^1].

**prettier-plugin-tailwindcss.** Its page calls it a Prettier v3+ plugin for Tailwind CSS v3.0+ that automatically sorts classes by its recommended class order [^2]. By default it sorts the class attribute, framework equivalents like className and :class, and Tailwind @apply directives [^2]. The tailwindAttributes option takes extra attribute names to sort [^2], and the tailwindFunctions option takes function names for sorting classes in function calls [^2]. Its page says that if you want to use its class sorting logic outside of Prettier, you can import it from a separate entry point the plugin provides for that purpose [^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 prints text, JSON or SARIF 2.1.0 for GitHub code scanning [^3] and ships as a GitHub Action that annotates pull requests inline [^3]. The --diff-base option reports only findings on lines changed since a git ref such as origin/main [^3]. The --baseline option records current per-file finding counts so only new findings fail CI [^3]. The audit exits 1 when it finds anything, so it can fail a CI job [^3].

## Pricing and fees

eslint-plugin-tailwindcss is free; its page says it is available to everyone for free [^1]. As a dev dependency, it does not affect your final bundle size [^1].

The facts given here state no price for prettier-plugin-tailwindcss, so its price is not published here.

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

## Setting it up and daily use

eslint-plugin-tailwindcss installs as a development dependency with npm i -D eslint-plugin-tailwindcss [^1], or with other package managers such as pnpm [^1]. Its configuration uses a mandatory cssConfigPath setting [^1], which can be an absolute or relative path [^1].

prettier-plugin-tailwindcss, as of v0.5.x, requires Prettier v3 and is ESM-only [^2]. With Tailwind CSS v4 you must specify your CSS file entry point with the tailwindStylesheet option [^2]. If a local Tailwind configuration file cannot be found, it falls back to the default Tailwind configuration [^2]. Check the project's own pages for how to install it.

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]. Day to day, --fix 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].

## Things to check before you choose

Check your Tailwind version. The ESLint plugin's current line is made for Tailwind CSS v4 [^1], the Prettier plugin's page names Tailwind CSS v3.0+ [^2], and NormWind works with Tailwind CSS v4 projects [^3].

Check your tool versions. The Prettier plugin needs Prettier v3 [^2], and the ESLint plugin names ESLint v10 support [^1].

Check the setup path each one asks for: cssConfigPath for ESLint [^1], tailwindStylesheet for Prettier with Tailwind CSS v4 [^2].

Check whether you need sorting, linting rules, or shorthand findings. The facts here do not say how the tools overlap, so read each project's own pages.

## How to choose

If you want an ESLint plugin for Tailwind CSS usage, eslint-plugin-tailwindcss's page describes that [^1].

If you want classes sorted automatically in a recommended order, prettier-plugin-tailwindcss's page describes that [^2].

If you want to sort classes in function calls or extra attributes, the Prettier plugin has options for both [^2] [^2].

If you want to lint inside a hosted repository's pipeline, the ESLint plugin's page says it can [^1].

If you want shorthand findings like px-4 py-4 to p-4, NormWind's claims describe that [^3].

If you want only new findings to fail CI, NormWind's claims describe --baseline [^3].

## Frequently asked questions

### Is eslint-plugin-tailwindcss free?

Its page says it is available to everyone for free [^1]. It installs as a development dependency, so it does not affect your final bundle size [^1]. The facts here state no paid plan for it, so check the project's own pages if you need more detail on licensing.

### Is prettier-plugin-tailwindcss free?

The facts given here state no price for prettier-plugin-tailwindcss, so its price is not published here. For comparison, NormWind is free with no paid tier [^3]. Check the plugin's own project pages for its licence and cost before you rely on it.

### How do you install eslint-plugin-tailwindcss?

Run npm i -D eslint-plugin-tailwindcss to add it as a development dependency [^1]. Other package managers such as pnpm also work [^1]. Its configuration uses a mandatory cssConfigPath setting [^1], which can be an absolute or relative path [^1].

### Does prettier-plugin-tailwindcss work with Tailwind CSS?

Its page says that with Tailwind CSS v4 you must specify your CSS file entry point with the tailwindStylesheet option [^2]. It also says that as of v0.5.x it requires Prettier v3 and is ESM-only [^2]. Check those two requirements against your project before installing.

### Can NormWind run in CI alongside these tools?

NormWind ships as a GitHub Action that annotates pull requests inline [^3]. Its audit exits 1 when it finds anything, so it can fail a CI job [^3]. The facts here do not say how it combines with either plugin, so check your own setup for overlap.

NormWind is free with no paid tier. [^3] - [Visit NormWind](/go/eslint-plugin-tailwindcss-vs-prettier-plugin-tailwindcss)

## Sources

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