eslint-plugin-tailwindcss vs prettier-plugin-tailwindcss in 2026
eslint-plugin-tailwindcss and prettier-plugin-tailwindcss compared on purpose, install and setup, with NormWind as a third option for Tailwind audits.
SayDeploy is published by LunarWerx, which makes some of the tools compared here.
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 [email protected] [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]
Try NormWindSources
Related comparisons
- Best Tailwind CSS linters in 2026
- Best Tailwind CSS linters for Tailwind CSS developers in 2026
- eslint-plugin-tailwindcss vs tailwind-merge in 2026
- Tailwind CSS IntelliSense alternatives in 2026
- tailwind-merge alternatives in 2026
- AnatomyOf vs Codecademy in 2026: Pricing, Setup and Features
- AnatomyOf vs DevDocs in 2026: Pricing, Setup, Features
- AnatomyOf vs Exercism in 2026: Pricing, Setup and Features
- AnatomyOf vs Learn X in Y Minutes in 2026
- AnatomyOf vs Rosetta Code in 2026: Pricing and Setup